The Angular model state
Whenever we use NgForm, every element within our form, including input, text area, and select, has some states defined on the associated model. ngModel tracks these states for us. The states tracked are:
- pristine: The value of this is true as long as the user does not interact with the input. Any update to the input field and ng-pristine is set to false.
- dirty: This is the reverse of ng-pristine. This is true when the input data has been updated.
- touched: This is true if the control ever had focus.
- untouched: This is true if the control has never lost focus. This is just the reverse of ng-touched.
- valid: This is true if there are validations defined on the input element and none of them are failing.
- invalid: This is true if any of the validations defined on the element are failing.
pristinedirty or toucheduntouched are useful properties that can help us decide when error labels are shown.