text-mask: Does not work with Model Driven Forms (FormBuilder)

Is this still not supporting reactive forms with FormControl? You have built out an example with such a use case in your angular2 code, but I’m still receiving the error: “Cannot bind to ‘textMask’ since it isn’t a known property of input.”

Alright, I’ll look into making it work with FormBuilder API soon. Thanks for explaining!

I am not using #phoneInput to grab the value. Angular 2 has 2 new ways of doing forms. One is a template driven form using Controls and a Control Group. The other is using the FormBuilder API, and creating the control objects in your component. I am using the latter. ngModel implements 2 -way data binding similar to Angular 1.

In my component I inject the FormBuilder API, and create a control group.

  constructor(private _fb: FormBuilder, private _phoneService: PhoneNumberService) {
    this.sendCodeMessage = "SEND CODE"
    this.enterPhoneNumberForm = this._fb.group({
      phoneNumber: ['', Validators.required]
    });
  }

and I attach it to my template by declaring the form as ngFormModel and connecting the input to it’s Control Object.

  <form [ngFormModel]="enterPhoneNumberForm" (ngSubmit)="sendCode()" novalidate>
      <div class="form-body">
        <div class="section">
          <input #phoneInput  [ngClass]="{submitted: numberSubmitted}" type="text"  placeholder="Phone Number" class="gui-input" [ngFormControl]="enterPhoneNumberForm.find('phoneNumber')" />