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 :
https://plnkr.co/edit/JYMA1M891JQB1C9EviKN?p=preview


#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>

#12

To those that stumble upon this post, please verify if you are using reactive forms (although original questioner does not appear to be using reactive forms). In case you are using reactive forms you will need to provide validators there like:

        this.form = new FormGroup({
            input: new FormControl("", { validators: [Validators.required, Validators.min(10), Validators.max(10)]})
        }