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?

This is now in the documentation you linked to, under the heading "Using CSS classes". — Bernhard Hofmann, Nov 13 '14 at 16:41
You're right :) Althought seems a bit new (alongside the new classes it defines) — Luis Masuelli, Nov 13 '14 at 17:02

score 274 · Accepted Answer · edited Apr 06 '19 at 20:22

274

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.

edited Apr 06 '19 at 20:22

georgeawg

48,608
13
72
95

answered Jul 29 '14 at 21:48

Yuriy Rozhovetskiy

22,270
4
37
68

1

does it mean that if control is touched it is dirty for sure? is the lost focus considered an interaction? – Sasuke Uchiha Sep 09 '20 at 16:42

XML · Answer 2 · 2022-04-19T18:20:55.873

109

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

edited Apr 19 '22 at 18:20

answered Nov 14 '14 at 03:30

XML

19,206
9
64
65

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? – SamAko Jan 27 '16 at 00:26
`$setPristine` simply makes the form un-`$dirty`. I think you may want `form.setValidity()`. See several helpful answers on [this post](http://stackoverflow.com/questions/26015010/angularjs-form-reset-error). – XML Jan 27 '16 at 07:23

score 42 · Answer 3 · answered Apr 06 '19 at 18:33

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.

score 17 · Answer 4 · edited Apr 17 '22 at 06:53

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

score 13 · Answer 5 · edited Jun 20 '20 at 09:12

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.

score 0 · Answer 6 · edited Aug 01 '23 at 14:16

0

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

edited Aug 01 '23 at 14:16

Divyesh pal

952
1
11
17

answered Jul 27 '23 at 22:19

lakshmi

11
1

AngularJS - difference between pristine/dirty and touched/untouched

6 Answers6

Linked