CODEWITHSUNDEEP
javascripthtmlangularjs
Elad Noty
Elad Noty

Reputation: 237

How to validate input number length with angular?

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 !

Upvotes: 10

Views: 28133

Answers (4)

Rami Alloush
Rami Alloush

Reputation: 2636

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]],
    });

Upvotes: 12

Daniel Danielecki
Daniel Danielecki

Reputation: 10590

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"
/>

Upvotes: 2

Tom-Oliver Heidel
Tom-Oliver Heidel

Reputation: 1131

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}$/"

Upvotes: 3

Rahul Desai
Rahul Desai

Reputation: 15501

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

Upvotes: 5

Related Questions