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

Get hands-on with 1200+ tech skills courses.