Angular Reactive Form Validation

Validating a Reactive Form in Angular is similar to how it works in a Template-Driven 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.

⚠️ Note: At 12:22, the error messages did not show because the [disabled]="myForm.invalid" was not removed from the button tag. The “myForm” object was not used at this point of the video.