Providing Form Status Feedback and Creating Nested Form

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 yet

• ng-touched: Indicates that we have interacted with the control

• ng-dirty: Indicates that we have set a value to the control

• ng-pristine: Indicates that the control does not have a value yet

• ng-valid: Indicates that the value of the control is valid

• ng-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: