AngularJS - difference between pristine/dirty and touched/untouched

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.

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.

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

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