text-mask: selectionStart is undefined (Ionic RC5)

Same issue. Could someone resolve this?

To enable this in prod mode you also need to replace this: "ngOnInit":[{"__symbolic":"method"}], to this: "ngAfterViewInit":[{"__symbolic":"method"}], in node_modules/angular2-text-mask/dist/angular2TextMask.metadata.json at 1:902 Have a nice day! )

You need to replace this line: MaskedInputDirective.prototype.ngOnInit = function () { to this: MaskedInputDirective.prototype.ngAfterViewInit = function () { in node_modules/angular2-text-mask/dist/angular2TextMask.js at line 22

@ihadeed looking at the debugger, I can confirm that the element does indeed not exist yet.

I would suggest that you try ngAfterContentInit or ngAfterViewInit instead of ngOnInit.

See: lifecycle-hooks

@AfonsoHenrique use my solution or try to make npm clear cache BEFORE npm install

I updated the package json of my project to angular2-text-mask@4.0.0 and ran npm install. The selectionStart error stopped, but the mask don’t appear anymore on the browser (Chrome) or the device (iOS), don’t log anything either.

<ion-input placeholder=“Seu CPF” [textMask]=“{mask: masks.cpf}” [formControl]=“controlFormRegistro.controls[‘cpf’]” type=“tel”></ion-input>

this.masks = { date: [/\d/, /\d/, ‘/’, /\d/, /\d/, ‘/’, /\d/, /\d/, /\d/, /\d/], cpf: [/\d/, /\d/, /\d/, ‘.’, /\d/, /\d/, /\d/, ‘.’, /\d/, /\d/, /\d/, ‘-’, /\d/, /\d/], };

I can confirm this. Here’s a Plunkr with the issue: http://plnkr.co/edit/g1gQMOs8ZzoP4ISh51Il?p=preview

The mask doesn’t show at all. It seems like there is an issue initializing the directive. The error message indicates that the value of inputElement is undefined, which is why it can’t read the value of inputElement.selectionStart (see https://github.com/text-mask/text-mask/blob/17ad73bd74bb574d09d2554d18e535a364084e07/core/src/createTextMaskInputElement.js#L62).

My best guess is that the input element doesn’t exist when the textMask directive runs. So when our ngOnInit runs, the input element doesn’t exist in the DOM yet, which leads to inputElement being undefined.

We can do more tests to make sure this is the issue. If it is, we can apply a fix like this to make sure that the mask will always work:

// not including all the code to keep it simple

private initAttempts: number = 0; // we won't always need this
private isInit: boolean = false; // all methods should wait for this before executing to avoid any errors

ngOnInit() {

  if ( inputElementExists() ) { // simpliying code by just calling it inputElementExists
    this.isInit = true;
    // do other init stuff here
  } else {
    if (this.initAttempts > 10) {
      // tried too many times and failed, something must be really wrong
      return;
    }
    this.initAttempts++;
    setTimeout(this.ngOnInit.bind(this), 250);
  }

}