Question

在我的角度应用程序中，我有一个输入字段，我希望用户在其中输入0-100之间的输入值。我使用了最小/最大属性，但是它不起作用。如何限制用户输入小于0且大于100的输入值？

component.html

<mat-form-field>
   <input type="hidden" [(ngModel)]="row.id" [ngModelOptions]="{standalone: true}" id="id" name="Id">
    <input  type="number"[(ngModel)]="row.percent_complete" min="0" max= "100"> 
</mat-form-field>



 <div class="submit-button">
    <ion-button color="primary" expand="block" fill="outline" (click)="onSubmit()">Submit Changes</ion-button>
  </div>

component.ts

 onSubmit() {

      let postData = [];

      this.deltasByGroupId[this.selectedGroupId] = this.measures;

      for (var groupId in this.deltasByGroupId) {
        if (!this.deltasByGroupId.hasOwnProperty(groupId)) { continue }

        for (var k in this.deltasByGroupId[groupId]) {
          if (!this.deltasByGroupId[groupId].hasOwnProperty(k)) { continue }

          let secs = this.deltasByGroupId[groupId][k];

          var item1 = secs["items"]
          for (var j in item1) {

            var item2 = item1[j]
            for (var l in item2) {

              var listItem = item2["items"]
              for (var li in listItem) {
                this.model = new MeasurementChange(listItem[li].id, listItem[li].percent_complete);
                postData.push(this.model);
              }
            }
          }
        }
      }

      this.pEntryService.postEntries(postData).subscribe(res => {
        this.localDialogRef.close();

        Swal(
          'Success!',
          'Form Submitted Sucessfully!',
          'success',
        )
      })

    }
  });
}

Answer 1

<input type="number" min="0" max="100">

Answer 2

<input  type=number[(ngModel)]="row.percent_complete" min="0" max= "100">

这里有几个错误。

<input type="number" [(ngModel)]="row.percent_complete" min="0" max= "100">

数字应该在双引号之间，并且ngModel和数字之间必须有空格

Answer 3

我也尝试做min和max属性，但是它不起作用，所以我使用了反应式表单方法验证，但是即使用户输入时输入的内容不受限于最大设置，但在使用数字光标时仍然可以使用。 / p>

我建议根据表单的有效性禁用和启用按钮。这是我最终所做的，并且有效，但是我不介意是否有人能找到更好的解决方案。

Answer 4

使用HTML min和max属性仅限制数字游标允许的数量。这不会阻止用户输入自己的号码。反应形式有一些不同的情况，添加Validators.min()和Validators.max()将使限制形式有效。这意味着，用户仍然可以输入更大的值，但是格式将无效。用[disabled]="form.invalid"禁用按钮将阻止用户单击它。
如果这不是您的理想选择，则始终可以将[(ngModel)]分为单独的[ngModel]="row.percent_complete"和(ngModelChange)="myCheck($event)"。在myCheck函数内部，您可以手动检查新值，如果您不喜欢它，请忽略它。

myCheck(event: number) {
  // only assign if value is valid
  if (event <= max && event >= min){
    this.row.percent_complete = event;
  }
}

使用.valueChanges方法，可以通过反应形式实现相同的目的。

如何为用户输入添加最小/最大输入限制？

4 个答案: