Min/max attribute with type number for input!


for me this is not working:

    <input class="myClasses" (change)='update($event)' [(ngModel)]="input" 
    type="number" name="input" min="0" max="10" (blur)='blur($event)' value="input">

I can still input value beyond min-max.

Am I doing something wrong?


You use [(ngModel)] and value attribute together. I think angular confusing about what want you doing. Delete the value=“input”. Check the .ts file, be sure “input” is a number type.


Thanks for replying @hmtylmz :slight_smile:

I tried what you asked still same :confused:


Why are you using <input> instead of <ion-input>?


I did try ion-input, with that i was not able to center align my text.

Plus min max is not working with ion input!


got text-center from here




I have a same problem with the input min, max.
When I set the min or max value on a ion-input type=“number” the min and max attribute is not validated by the ngModel.

          <ion-input type="number" [(ngModel)]="number" required="true" clearInput=true min="0" max="5"></ion-input>

If the user input -1, the field is allready valid :

This is a plunker for test the error :


Did you make it work? I have the same problem.


I’ve added the lib https://github.com/yuyang041060120/ng2-validation/ for add the min and max validation.


I can confirm that using the [min]=“0” directive with the https://github.com/yuyang041060120/ng2-validation/ module works perfectly on ion-input type=‘number’


Put input type as a “tel”, Because maxlength work with input type as a text & telephone number in ionic 2.

<ion-input type="tel" maxlength="10" clearInput [(ngModel)]="userPhone"></ion-input>