Invalid input when copying values into it

Question

For an input in reactive form, there is a simple validator for checking the phone (on the screenshot). If you enter the number manually - everything is ok. Problem: if you copy the whole number in the input, the validator works because Input becomes invalid.

If you delete one character and then again add or re-copy the entire number in the input - all returns to the valid state

One 'businessPhone': new FormControl ('', [Validators.required, Validators.pattern (REGEX.phone)]),

overthesanity overthesanity 4,012 2 four 14 · Accepted Answer · 2019-03-15T23:01:46

This is a known problem, which is more like a side effect, because it appears with different nuances. The fastest solution is to hang a paste event handler on your input and call the updateValueAndValidity method, which recalculates the value and status of the control check.

Template:

 <input formControlName="businessPhone" (paste)="pastePhone()">

Component:

 public pastePhone(): void { this.название_вашей_формы.get('businessPhone').updateValueAndValidity(); }

I did yesterday, but everything works correctly there even without updateValueAndValidity stackblitz.com/edit ... ...
Also, if you add the phone's valid values using the patchValue () method, the second control is always invalid, until you delete one character and return it.
The same behavior if you add an initial value in new FormControl - the second control does not turn out to be valid

Invalid input when copying values into it

1 answer 1

More articles:

Invalid input when copying values ​​into it

1 answer 1

More articles:

Invalid input when copying values into it