Validating angular 5 input field

Question

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

i think it might work. I will check it. Could you also check from your end if it works? — Mark
– Mark, Commented Sep 21, 2018 at 4:24
@PramodPatil : ng-pattern is not applicable in angular 5. Probably it would have been used in angularjs. Thanks for the pointer though, it directed me to the right solution :) — Mark
– Mark, Commented Sep 26, 2018 at 10:23

Mark · Accepted Answer · 2018-09-26 10:16:53Z

3

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

answered Sep 26, 2018 at 10:16

Mark

6361 gold badge5 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Validating angular 5 input field

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related