Angular Template-Driven Form Validation
April 11, 2020
Validating a Template-Driven Form in Angular is similar to how it works in a Reactive Form. The properties and control status CSS classes are the same. There are seven (7) useful CSS classes you can use in Angular:
ng-pristine(data in the form field has not changed)
ng-dirty(data in the form field has changed)
ng-valid(all requirements are met)
ng-invalid(at least one requirement is not met)
ng-touched(a field has been clicked or touched)
ng-untouched(a field has not been clicked or touched)
ng-pending(pending state of a input with async validation)
There are more than the ones mentioned above (e.g.
ng-not-empty). Using these classes can display useful messages to help users fill forms properly to ensure that your forms are validated instantly.