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，请看看。