Angular 4 Form Validators - minLength & maxLength does not work on field type number

Question

I am trying to develop a contact form, I want user to enter phone number values between length 10-12.

Notably same validation is working on Message

Answer 1

You can use a pattern instead to validate your phone number, and change your input type to text

and use this pattern for phone number tha have a length between 10 and 12

phonePattern = /^[0-9]{10,12}$/;

and change the validator on your form control

phone: ['',  [Validators.required, Validators.pattern(this.phonePattern)]],

and you can display the error:

      

        required!
      
      

        invalid!