Min and max value of input in angular4 application

Question

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.

template

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

Do you know how I can do this ?

Answer 1

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

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.