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-pristine ng-dirty ng-touched ng-untouched   What s the difference between pristine dirty  and touched untouched

User · Answer

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 all validations of form fields are not successful

User · Answer

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

User · Answer

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

User · Answer

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

User · Answer

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] AngularJS - difference between pristine/dirty and touched/untouched

Examples related to angularjs