I implemented the form validation by the manual https://auth0.com/blog/angular-2-series-part-5-forms-and-custom-validation/ ...

<input class="form-control" type="text" name="phone" autocomplete="off" placeholder="(XXX)-XXX-XXXX" mask="" [disabled]="disabled" [(ngModel)]="candidate.phone" ngControl="phone"/>

...

...

 static phone(control: Control): ValidationResult { let URL_REGEXP = /^\(\d{3}\)-\d{3}-\d{4}$/i; if (control.value && (control.value.length <= 5 || !URL_REGEXP.test(control.value))) { return {"phone": true}; } return null; }

...

plus for this form element I implemented the input mask directive: http://pastebin.com/wRzHSsVy

The problem arises as follows: when entering a phone number, validation first works and then the mask directive, so that the data that the validator checks and the data that the mask directive formats differ, for example, the phone number is (888) -888-88882 and the mask causes number to the form (888) -888-8888 but the validator has already worked and issued an error before the mask is triggered.

How can a validator be called after an input mask directive triggers?

    1 answer 1

    HTML:

     <input type="text" class="form-control" name="phone" placeholder="Phone" [(ngModel)]="myclass.phone" [pattern]="PHONE_PATTERN" [textMask]="{mask: PHONE_MASK}"/>

    ts:

     static PHONE_PATTERN = /\(\d{3}\)\-\d{3}\-\d{4}/; static PHONE_MASK = ['(', /[1-9]/, /\d/, /\d/, ')', '-', /\d/, /\d/, /\d/, '-', /\d/, /\d/, /\d/, /\d/];