Angular Reactive Form Validation
April 11, 2020
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-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.