Min/max attribute with type number for input!


#1

for me this is not working:

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

I can still input value beyond min-max.

Am I doing something wrong?


#2

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.


#3

Thanks for replying @hmtylmz :slight_smile:

I tried what you asked still same :confused:


#4

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


#5

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!


#6

got text-center from here

http://ionicframework.com/docs/theming/css-utilities/

#7

Hello,

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-item>
          <ion-label>Number</ion-label>
          <ion-input type="number" [(ngModel)]="number" required="true" clearInput=true min="0" max="5"></ion-input>
</ion-item>

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

This is a plunker for test the error :


#8

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


#9

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


#10

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’


#11

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

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