Angular Template-Driven Form Validation

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-empty, ng-not-empty). Using these classes can display useful messages to help users fill forms properly to ensure that your forms are validated instantly.