forms - 如何验证/限制离子形式的数字输入？

Question

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

在这里，我使用 max 字段并将其与 ts 文件中的 max 变量绑定。但我仍然可以输入高于 max 字段的值。我该如何解决？

Answer 1

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

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

请注意，我自己遇到了问题，即 0 被标识为未定义。

空输入的解决方法：

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

0的解决方案：

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

Answer 2

最大值和最小值也不适合我。我正在使用 Android 应用程序。

使用您的代码的解决方法是示例：

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

}