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.