Javascript Can'；t对类型=数字的输入字段应用限制

下面是我的输入字段

type=“number”

。我已经应用了min和max属性来限制用户输入字段的值。问题是，给定的验证仍然允许用户在键入数值时超出限制。请告诉我如何阻止他/她输入超出限制的值

 <input name="capacity" [(ngModel)]="nService.capacity" type="number" 
class="input-minimal" min="1" max="9999" placeholder="Capacity" required>

---

这是我限制为属性的自定义指令的代码：

最大长度的AngularJs自定义指令：

app.directive('inputMaxlength', function() {
  return {
    require: 'ngModel',
    link: function (scope, element, attrs, ngModelCtrl) {
      var maxlength = Number(attrs.inputMaxlength);
      function fromUser(text) {
          if (text.length > maxlength) {
            var transformedInput = text.substring(0, maxlength);
            ngModelCtrl.$setViewValue(transformedInput);
            ngModelCtrl.$render();
            return transformedInput;
          } 
          return text;
      }
      ngModelCtrl.$parsers.push(fromUser);
    }
  }; 
})

在HTML中使用此自定义指令，如

<input type="text" input-maxlength=20 ......>

---

对于角形验证，有很多样本。

在发送之前，您必须检查有效性

以下是如何使用：

HTML

<form novalidate (onSubmit)="submitForm()" [formGroup]="myForm">
    <input type="number" formControlName="myNumber">
    <button type="submit">Send</button>
</form>

---

使用

type=“number”

在输入上设置属性

max

和

min

，将防止用户使用微调器递增/递减值。但它不会阻止键盘输入。为此，您必须编写一个自定义验证器

在我的示例中，我绑定到带有可选错误验证块的

keyup

事件，以防您希望让用户自行更正

HTML:

 <input autofocus id="myModel" (keyup)="preventInput($event)" 
       name="myModel" 
        #myModel="ngModel"  style="width:60px"  
        [(ngModel)]="capacity" type="number" 
       class="input-minimal" min="1" max="99" 
       placeholder="Capacity" required>

 preventInput(event){
    let value=this.capacity;
    if (value >= 100){
      event.preventDefault()
      this.capacity = parseInt(value.toString().substring(0,2));
    }
  }

---

注意：对于验证部分，我使用了来自

的溶液，它通常不会停止。但角度验证会带来错误。你可以阻止用户进一步进行验证，或者如果你想限制需要自定义指令的字符数，你可以告诉我怎么做吗？这个问题类似于我使用angular 2的NgFormsRy my bad。我们可以使用keyup事件来限制angular 2@YashwardhanPauranik中的字符

 preventInput(event){
    let value=this.capacity;
    if (value >= 100){
      event.preventDefault()
      this.capacity = parseInt(value.toString().substring(0,2));
    }
  }