AngularJS - difference between pristine/dirty and touched/untouched

Question

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?

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

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

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

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

Answer 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 any validation of form fields is not successful