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