On a recent Angular 4 project I had the need to use some custom form validations. Out of the box, Angular 4 contains validators for required, email, pattern, and min/max length, and it is possible to write your own validators as well. In particular, the custom validation I needed to do was verify that two fields were equal. For example, a form where the user enters a phone number, and then confirms the phone number in a second form field. The custom validation would verify that the two text inputs had the same value.
Tag Archives: Angular Forms
Most of Angular is different than Angular 1.x, but one of the idioms that stayed the same was the use of class names to identify form fields that had validation errors (e.g. ng-invalid, ng-dirty, ng-touched etc). By checking for different combinations of these classes, you can tell which fields are invalid, have been modified (“ng-dirty”), and had focus at some point (“ng-touched”). However, this had a tendency to lead to some rather verbose and messy view code just to show/hide a validation message: