angular4应用中输入的最小值和最大值

Question

我有一个带有表单的angular4应用程序。在这个我输入一个百分比。所以，我想用0到100之间的值来阻止输入。我试图添加min="0"和max="100"，但我仍然可以输入一个高于100或小于0的数字。

模板

<md-input-container>
  <input type="number" 
    maxlength="3" 
    min="0" 
    max="100" 
    required 
    mdInput 
    placeholder="Charge" 
    [(ngModel)]="rateInput" 
    name="rateInput">
  <md-error>Required field</md-error>
</md-input-container>

你知道我怎么做吗？

Answer 1

我成功使用了表单控件。这是我的HTML代码：

    <md-input-container>
        <input type="number" min="0" max="100" required mdInput placeholder="Charge" [(ngModel)]="rateInput" name="rateInput" [formControl]="rateControl">
        <md-error>Please enter a value between 0 and 100</md-error>
    </md-input-container>

在我的打字稿代码中，我有：

        this.rateControl = new FormControl("", [Validators.max(100), Validators.min(0)])

因此，如果我们输入的值大于100或小于0，则材料设计输入变为红色且该字段未验证。所以之后，如果值不好，我点击保存按钮时就不保存。

Answer 2

实际上当你使用type =“number”时你的输入控件用上/下箭头填充增加/减少数值，所以当你用这些按钮更新文本框值时它不会超过100的限制，但是当你手动输入120这样的输入时/ 130等等，它不会验证最大限制，因此您必须通过代码验证它。

您可以禁用手动输入，或者您必须在valueChange / textChange / key *事件上编写一些代码。

Answer 3

这是解决方案：

这是一种破解，但它会起作用

<input type="number" 
placeholder="Charge" 
[(ngModel)]="rateInput" 
name="rateInput"
pattern="^$|^([0-9]|[1-9][0-9]|[1][0][0])?"
required 
#rateInput2 = "ngModel">

<div *ngIf="rateInput2.errors && (rateInput2.dirty || rateInput2.touched)"
    <div [hidden]="!rateInput2.errors.pattern">
        Number should be between 0 and 100
    </div>
</div>

这是plunker的链接，请看看。

Answer 4

只需在angular2 +中添加（onkeypress）即可

<input type="number" 
    maxlength="3" 
    min="0" 
    max="100" 
    required 
    mdInput 
    placeholder="Charge" 
    [(ngModel)]="rateInput"
    (onkeypress)="return (event.charCode == 8 || event.charCode == 0) ? null : event.charCode >= 48 && event.charCode <= 57"
    name="rateInput">

在Angular 7上测试过

Answer 5

如果你想要验证长度，请使用minLength和maxLength。