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

【问题标题】：Can't apply limit on the input field of type=number无法对 type=number 的输入字段应用限制
【发布时间】：2017-09-07 05:50:49
【问题描述】：

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

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

【问题讨论】：

它通常不会停止。但是角度验证会抛出错误。如果您想限制需要自定义指令的字符数，您可以阻止用户进一步进行验证
你能告诉我怎么做吗？
这个问题和stackoverflow.com/questions/32936352/…类似

标签： javascript html angular typescript

【解决方案1】：

在带有type = "number" 的输入上设置属性max 和min 将阻止用户使用微调器增加/减少值。但它不会阻止键盘输入。为此，您必须编写一个自定义验证器。

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

附：对于验证部分，我使用了来自here的解决方案

【讨论】：

【解决方案2】：

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

这里是如何使用Reactive Forms：

HTML

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

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

【讨论】：

【解决方案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 ......>

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

【讨论】：

我正在使用 Angular 2 的 NgForms
对不起。我们可以使用 keyup 事件来限制 angular 2 @YashwardhanPauranik 中的字符