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