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?

Dissection

This is now in the documentation you linked to, under the heading "Using CSS classes". – Vu

You're right :) Althought seems a bit new (alongside the new classes it defines) – Dissection

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.

Alveta

does it mean that if control is touched it is dirty for sure? is the lost focus considered an interaction? – Hate

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.

Seamount

I'm looking for a way to clear the form's validation errors. form.$setPristine doesn't do it. I've seen other's suggest form.$setUntouched, but looks like this isn't available in angular 1.3 19 beta, which is the version I'm using. I can however call form.field_name.$setUntouched, but doing that for all fields is burdensome, is there a better way? – Chrissie

$setPristine simply makes the form un-$dirty. I think you may want form.setValidity(). See several helpful answers on this post. – Seamount

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.

Cadastre

Answer 4

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

Auster

Answer 5

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.

Profligate

Answer 6

ng-pristine - To check if the form is touched but not modified

ng-dirty - To check if the form is touched and modified

ng-touched - To check if the form is just touched

ng-untouched - To check if the form is untouched

Nugent