CODEWITHSUNDEEP
typescriptangular5
Mark
Mark

Reputation: 626

Validating angular 5 input field

Update : So i changed the input to type = "text" and maxlength is working fine but user is still able to enter negative numbers and is able to enter numbers not lying in the min and max range.

I need to validate an input field of type number in such a way that its min value should be 1.1, max value should be 8.1 and only 1 decimal value should be allowed. I am using template driven forms but user is still able to input a value greater than 8.1, less than 1.1 and he is able to enter more than one decimal place digit (i need help validating this logic as well). My requirement is to not let user be able to click the save button if any of the logic fails.

For allowing only one value after decimal requirement, i tried using maxlength but it does not work.

I tried using the below logic:

Component.html

<input type="number" min= "1.1" max ="8.1" #c="ngModel" [ngModel]= "myvaluefromcomponent | number:'1.1-1'" (ngModel)="myvaluefromcomponet=$event" />

<button type="button" id="save" [disabled] ="c.errors"> Save </button>

This is not working properly. Please point out where i am going wrong and suggest a working solution for this problem. Thanks

Upvotes: 1

Views: 1502

Answers (1)

Mark
Mark

Reputation: 626

I came across the PatternValidator directive and it solved my problem. I can use the directive on any control in this way :

<input type="number" min= "1.1" max ="8.1" #c="ngModel" [pattern]="myPattern" [ngModel]= "myvaluefromcomponent"/>

<button type="button" id="save" [disabled] ="c.errors?.pattern"> Save </button>

Hope the same works for other users looking for this kind of an implementation

Upvotes: 3

Related Questions