Search⌘ K
AI Features
Home
Courses
Learning Angular

Providing Form Status Feedback and Creating Nested Form

Explore how to monitor Angular form control statuses and provide dynamic feedback through CSS styling. Understand the creation of nested form groups to manage complex forms with hierarchical data, ensuring status and values propagate correctly across the form structure.

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