無法對類型=數字的輸入字段應用限制

以下是我的輸入字段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

無法對類型=數字的輸入字段應用限制

回答

相關問題