217

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?

2
  • 3
    This is now in the documentation you linked to, under the heading "Using CSS classes". Commented Nov 13, 2014 at 16:41
  • 1
    You're right :) Althought seems a bit new (alongside the new classes it defines) Commented Nov 13, 2014 at 17:02

6 Answers 6

281

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.
1
  • 2
    does it mean that if control is touched it is dirty for sure? is the lost focus considered an interaction? Commented Sep 9, 2020 at 16:42
116

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

2
  • 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
    Commented Jan 27, 2016 at 0:26
  • $setPristine simply makes the form un-$dirty. I think you may want form.setValidity(). See several helpful answers on this post.
    – XML
    Commented Jan 27, 2016 at 7:23
43

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

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

14

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

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.