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

在我的 Typescript 代码中，我有:

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

因此，如果我们输入大于 100 或小于 0 的值， Material 设计输入将变为红色并且该字段无效。所以之后，如果值不好，我点击保存按钮时不保存。