无法对type=number的输入字段应用限制

Question

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

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

Answer 1

将属性max和min设置在带有type = "number"的输入上，将防止用户使用旋转器递增/减少值。但是它不会阻止键盘的输入。要做到这一点，您必须编写自定义验证器。

在我的示例中，我使用一个可选的错误验证块绑定到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));
    }
  }

在验证部分，我使用了来自这里的解决方案

Answer 2

在寄出之前你必须先检查一下有效性。

下面是如何使用反应形式：

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

TS

import {FormBuilder, FormGroup, Validators} from '@angular/forms';


myForm: FormGroup;
constructor(prviate fb: FormBuilder) {
    this.myForm = fb.group({
        myNumber: [0, [Validators.max(9999), Validators.min(1)]]
    });
}

submitForm() {
    let value = this.myForm.value;
    if (this.myForm.valid) {
        // Here, do your stuff when the form is valid
    }
}

Answer 3

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

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

对于角形验证，有大量的样本。