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事件，以防您希望让用户自行更正。

<强> Plunker

<强> 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));
    }
  }

P.S。对于验证部分，我使用了来自here

的解决方案

Answer 2

发送前必须检查有效性。

以下是Reactive Forms：

的方法

<强> HTML

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

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

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

3 个答案: