如何为用户输入添加最小/最大输入限制? [英] How to add Min/Max input restriction for user input?

问题描述

在我的 angular 应用程序中，我有一个输入字段，我希望用户在其中输入 0-100 之间的输入值.我使用了 min/max 属性，但它不起作用.如何限制用户输入小于 0 和大于 100 的输入值?

component.html

<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()">提交更改</ion-button>

component.ts

 onSubmit() {让 postData = [];this.deltasByGroupId[this.selectedGroupId] = this.measures;for (var groupId in this.deltasByGroupId) {if (!this.deltasByGroupId.hasOwnProperty(groupId)) { 继续 }for (var k in this.deltasByGroupId[groupId]) {if (!this.deltasByGroupId[groupId].hasOwnProperty(k)) { 继续 }让秒 = 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();斯瓦尔('成功！'，'表单提交成功！','成功'，)})}});}

解决方案

这里有几个错误.

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

In my angular application, I have an input field where I want the user to enter an input value between 0-100. I used min/max attribute, but it's not working. How can I restrict users from entering input value less than 0 and more than 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',
        )
      })

    }
  });
}

解决方案

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

there are couple of mistake here.

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

number should come between double quotes and there must be space between ngModel and number

这篇关于如何为用户输入添加最小/最大输入限制?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！