CODEWITHSUNDEEP
formstypescriptvalidationionic-frameworkionic4
Shehan Karunarathne
Shehan Karunarathne

Reputation: 51

How to validate/limit numeric inputs in ionic forms?

<ion-input type="number" formControlName="title" max="{{max}}" (change)="changetodo($event)"></ion-input>

here i use max field and bind it with max variable in ts file. but still i can input values above the max field. how can i fix it?

Upvotes: 2

Views: 4030

Answers (2)

Jorge Luis Romano
Jorge Luis Romano

Reputation: 161

The max and min are not working for me too. I'm using to Android App.

Workaround using your code was sample:

<ion-input type="number" (ionChange)="changetodo()" [(ngModel)]="inputvalue"></ion-input>
<p *ngIf="msginputvalue">Must be between {{min}} and {{max}}</p>

You must use (ionChange) instead of (change) and use [(ngModel)]="inputvalue" too.

in your .ts :

  changetodo() {
console.log(this.inputvalue);
if (this.inputvalue < this.min || this.peso > this.max)
  this.msginputvalue = true;
else
  this.msginputvalue = false;

}

Upvotes: 1

Christo Goosen
Christo Goosen

Reputation: 586

<input type="number" pattern="[0-9]+" min="{{number.min}}" max="{{number.max}}"[(ngModel)]="number.answer">

But you would also need validation code in your .ts file.

Just take note I had issues myself with 0 being identified as undefined.

Solution for empty input: 

let numAnswer = parseInt(number.answer);
if(typeof number.answer === 'undefined'){
          this.errorMessage = "Please provide an answer";
          return false;
}

Solution for 0:

 if (number.min != numAnswer && numAnswer === 0) {
          this.errorMessage = "The answer must be more than " + number.min;
          return false;
        }

Upvotes: 1

Related Questions