如何以离子形式验证/限制数字输入?

时间:2018-04-12 15:50:12

标签: forms validation ionic-framework max min

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

这里我使用max field并将其与ts文件中的max变量绑定。但我仍然可以输入超过最大字段的值。我该如何解决?

2 个答案:

答案 0 :(得分:0)

<div class="wpr">
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar elit vitae lobortis tempor. Ut vitae quam maximus, iaculis lacus ut, volutpat lacus. Donec eget odio vel ligula ullamcorper hendrerit nec et arcu.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar elit vitae lobortis tempor. Ut vitae quam maximus, iaculis lacus ut, volutpat lacus.</span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

但您还需要.ts文件中的验证码。

请注意我自己有问题,0被识别为未定义。

空输入的解决方案:

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

0的解决方案:

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

答案 1 :(得分:0)

最大值和最小值对我也不起作用。我正在使用Android App。

使用代码的解决方法只是示例:

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

您必须使用(ionChange)而不是(change),并且也必须使用[(ngModel)] =“ inputvalue”。

在您的.ts中:

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

}