AngularJS - difference between pristine/dirty and touched/untouched

Question

AngularJS Developer Guide - Forms tell there are many styles and directives regarding forms and fields. For each one, a CSS class:

ng-valid
ng-invalid
ng-pri         


        

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

Answer 3

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 4

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.