Validating input in forms
An Angular form should validate input and provide visual feedback to enhance UX and guide users to complete the form successfully. We will investigate the following ways to validate forms in Angular applications:
- Global validation with CSS
- Validation in the component class
- Validation in the component template
- Building custom validators
In the following section, we will learn how to apply validation rules globally in an Angular application using CSS styles.
Global validation with CSS
The Angular framework sets the following CSS classes automatically in a form, template-driven or reactive, that we can use to provide user feedback:
ng-untouched
: Indicates that we have not interacted with a form yetng-touched
: Indicates that we have interacted with a formng-dirty
: Indicates that we have set a value to a formng-pristine
: Indicates that we have not modified a form yet
Furthermore...