Providing Form Status Feedback and Creating Nested Form
Learn how to provide feedback to the user while inputting form data and implement nested form hierarchies.
We'll cover the following
We’ll investigate different properties that we can check to get the status of a form control and provide feedback to the user according to that status. The Angular framework sets the following CSS classes automatically in a form control according to the current status of the control:
ng-untouched
: Indicates that we have not interacted with the control yetng-touched
: Indicates that we have interacted with the controlng-dirty
: Indicates that we have set a value to the controlng-pristine
: Indicates that the control does not have a value yetng-valid
: Indicates that the value of the control is validng-invalid:
Indicates that the value of the control is not valid
Each class name has a similar property in the form model. The property name is the same as the class name without the ng-
prefix. We could try to leverage both and provide a unique experience with our forms.
Suppose we would like to display a highlighted border in an input control when interacting with that control for the first time. We should define a global CSS style in the styles.css
file, such as the following:
Get hands-on with 1200+ tech skills courses.