AngularJS - difference between pristine/dirty and touched/untouched
AngularJS Developer Guide - Forms lists many styles and directives regarding forms and fields. For each one, a CSS class:
ng-valid
ng-invalid
ng-pristine
ng-dirty
ng-touched
ng-untouched
What's the difference between pristine/dirty, and touched/untouched?
Solution 1:
AngularJS Developer Guide - CSS classes used by AngularJS
- @property {boolean} $untouched True if control has not lost focus yet.
- @property {boolean} $touched True if control has lost focus.
- @property {boolean} $pristine True if user has not interacted with the control yet.
- @property {boolean} $dirty True if user has already interacted with the control.
Solution 2:
$pristine/$dirty tells you whether the user actually changed anything, while $touched/$untouched tells you whether the user has merely been there/visited.
This is really useful for validation. The reason for $dirty was always to avoid showing validation responses until the user has actually visited a certain control. But, by using only the $dirty property, the user wouldn't get validation feedback unless they actually altered the value. So, an $invalid field still wouldn't show the user a prompt if the user didn't change/interact with the value. If the user entirely ignored a required field, everything looked OK.
With Angular 1.3 and ng-touched, you can now set a particular style on a control as soon as the user has blurred, regardless of whether they actually edited the value or not.
Here's a CodePen that shows the difference in behavior.
Solution 3:
In Pro Angular-6 book is detailed as below;
- valid: This property returns true if the element’s contents are valid and false otherwise.
invalid: This property returns true if the element’s contents are invalid and false otherwise.
pristine: This property returns true if the element’s contents have not been changed.
- dirty: This property returns true if the element’s contents have been changed.
- untouched: This property returns true if the user has not visited the element.
- touched: This property returns true if the user has visited the element.
Solution 4:
It's worth mentioning that the validation properties are different for forms and form elements (note that touched and untouched are for fields only):
Input fields have the following states: $untouched The field has not been touched yet $touched The field has been touched $pristine The field has not been modified yet $dirty The field has been modified $invalid The field content is not valid $valid The field content is valid They are all properties of the input field, and are either true or false. Forms have the following states: $pristine No fields have been modified yet $dirty One or more have been modified $invalid The form content is not valid $valid The form content is valid $submitted The form is submitted They are all properties of the form, and are either true or false.
Solution 5:
This is a late answer but hope this might help.
Scenario 1: You visited the site for first time and did not touch any field. The state of form is
ng-untouched and ng-pristine
Scenario 2: You are currently entering the values in a particular field in the form. Then the state is
ng-untouched and ng-dirty
Scenario 3: You are done with entering the values in the field and moved to next field
ng-touched and ng-dirty
Scenario 4: Say a form has a phone number field . You have entered the number but you have actually entered 9 digits but there are 10 digits required for a phone number.Then the state is ng-invalid
In short:
ng-untouched:When the form field has not been visited yet
ng-touched: When the form field is visited AND the field has lost focus
ng-pristine: The form field value is not changed
ng-dirty: The form field value is changed
ng-valid : When all validations of form fields are successful
ng-invalid: When all validations of form fields are not successful