I want to validate a 9 digits number using angular,
this is in my modal :
<input type="number" class="form-control" ng-model="id" required>
i tried pattern = [0-9]{9}, seems its passing every number that its getting . I want to pass only number 000000000 - 9999999999 , min-max also not working for me.
this is what my app adding to this class:
class="form-control ng-pristine ng-valid-number ng-invalid ng-invalid-required"
thank u !
I just use a pattern as validator. The following code will make the field required and must be only digits of length 10
ngOnInit() {
this.firstForm = this.fb.group({
firstCtrl: ['', [Validators.pattern('^[0-9]{10}$'), Validators.required]],
});
Have you tried both ngMinlength and ngMaxlength at the same time?
Example:
<input type="text" ng-minlength=9 ng-maxlength=9 />
Check out the official documentation regarding this: https://docs.angularjs.org/api/ng/directive/input
Very nice tutorial about form validation: http://www.ng-newsletter.com/posts/validations.html
As mentioned by Rahul Desai you have to use ngMinlength and ngMaxlength.
But since you want to use numbers you have to change the code a little bit to this
<input type="number" ng-model="id" ng-minlength=9 ng-maxlength=9 required />
To be honest I don't know what to do with class="form-control". Maybe you can add it or leave it out?!
Anyway you can also try this
<input type="number" ng-model="id" ng-pattern="/^[0-9]{1,9}$/" required />
You shouldn't need min/max attribute anymore.
EDIT:
I guess I made a mistake with the second one. It should be either
ng-pattern="/^[0-9]{9}$/"
or
ng-pattern="/^[0-9]{9,9}$/"
With Reactive Forms you should compose validators in such a way:
formControlYourField: [
"",
Validators.compose([
Validators.required,
Validators.minLength(9),
Validators.maxLength(9),
Validators.pattern("^[0-9]*$"),
]),
]
And of course in your .html
<input
matInput
required
formControlName="formControlYourField"
type="text"
placeholder="123456789"
/>
