angular4 应用程序中输入的最小值和最大值 [英] Min and max value of input in angular4 application

问题描述

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

I have an angular4 application with a form. In this one I have an input to enter a percentage. So, I want to block the input with value between 0 and 100. I tried to add min="0" and max="100" but I can yet enter an number higher than 100 or smaller than 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>

你知道我该怎么做吗?

推荐答案

我通过使用表单控件成功了.这是我的 html 代码:

I succeeded by using a form control. This is my html code :

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

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

And in my Typescript code, I have :

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

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

So, if we enter a value higher than 100 or smaller than 0, the material design input become red and the field is not validate. So after, if the value is not good, I don't save when I click on the save button.

这篇关于angular4 应用程序中输入的最小值和最大值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！