AngularJS - difference between pristine/dirty and touched/untouched
AngularjsAngularjs Problem Overview
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
?
Angularjs Solutions
Solution 1 - Angularjs
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 - Angularjs
$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 simply tabbed through a required field, ignoring it, everything looked OK until you submitted.
With Angular 1.3 and ng-touched
, you can now set a particular style on a control as soon as the user has visited and then blurred, regardless of whether they actually edited the value or not.
Here's a CodePen that shows the difference in behavior.
Solution 3 - Angularjs
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 - Angularjs
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 - Angularjs
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 any validation of form fields is not successful