无法对类型=数字的输入字段应用限制

以下是我的输入字段type="number"。我已应用min和max属性限制用户输入字段的值。问题在于此，验证仍允许用户在键入数值时超出限制。请告诉我如何阻止他/她输入超出限制的数值。无法对类型=数字的输入字段应用限制

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

来源

2017-09-07 Yashwardhan Pauranik

它的解决方案通常不会停止。但角度验证会抛出错误。您可以防止用户从进一步验证或仍在进行中，如果你想限制你需要自定义指令 – Prabhakaran

你能告诉我怎么字符数？ –

这个问题类似于https://stackoverflow.com/questions/32936352/html-number-input-min-and-max-not-working-properly –

设置上输入属性max和min与type = "number"将阻止用户incremen用微调器来调整/减小该值。但它不会阻止键盘输入。为此，您必须编写一个自定义验证器。

在我的例子我绑定到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

来源

2017-09-07 08:42:51 Vega

感谢名单的人来限制字符...一卷化险为夷:) –

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

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

而对于角度表单验证，大量的样本都在那里。

来源

2017-09-07 05:58:55 Prabhakaran

我使用角2的NgForms –

Sry基因是我不好。我们可以使用keyup事件在角2 @YashwardhanPauranik – Prabhakaran

你必须在发送之前检查的有效性。

这是怎么回事，有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 
    } 
}

来源

2017-09-07 07:07:10 trichetriche

无法对类型=数字的输入字段应用限制

回答

相关问题