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?
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.
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.
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
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.
Related
An edit, and add user form group utilizes the same view. However on edit, the username, password, and other details are autofilled into the form instead of presenting a blank form. The form (specifically for username) needs to be disabled, if and only if the field was pre-populated.
Using ng-readonly or ng-disabled works when the user is editing the form (username is disabled if username.length is true).
ng-readonly="username.length"
However, when the user is creating a new profile, typing in one letter into the username field will disable it, as ng-readonly recognizes that the username field has a length of 1. How would I set it so that Angular only checks to make the field read-only once instead of constantly monitoring changes in the field. The other problem is that I don't want Angular to completely ignore the field's changes, as validation (such as min length and isrequired) still need to fire.
Presumably you have a way of knowing whether or not the form is in 'add' or 'edit' mode. Can you just replace the condition of ng-readonly with an "isAdding" boolean?
I am using $dirty to check the changes in a form ,but if i type something in the input box and remove it, the $dirty is still true.Is there any solution or it will work like this.
That is by design. Any form becomes $dirty whenever the user interacts with it, and you cannot undo the interaction event. Though you can restore defaults, that is clearly not the same.
Consider using $watch to check whether new value is different from the default one, and $setPristine() to clear user input.
$dirty means The field has been modified one more time. for compare your model by your previous model you can use $watch in controller.
if your field is empty you have a solution must set required attribute and in your input tag and use below code set ng-validate of your form to novalidate and then use below code for compare:
formName.inputName.$dirty && formName.inputName.$error.required
$Dirty refers to the form field is modified and you want to check using $pristine
For example, ng-required calls $isEmpty to determine if it should set ng-invalid-required, etc. What does Angular call to decide if it should set ng-dirty?
The dirty state indicates whether it is modified to some actions or not
Hope I have understood your question correctly. If not please let me know.
You can use $setDirty(); method to Sets the form to a dirty state..This method can be called to add the ng-dirty class and set the form to a dirty state (ng-dirty class).
Angular detects this by using $dirty property.It is a boolean property. If it is True then user has already interacted with the form.
We can use $setPristine() method to Sets the form to its pristine state.This method can be called to remove the ng-dirty class and set the form to its pristine state (ng-pristine class).We use this method when we want to reuse a form after saving or resetting it.
Angular detect this by using $pristine property.It is a boolean property. If it is True then user has not interacted with the form yet.
I have a form with some tabs.Each tabs has set of some controls which are binded using angularjs and has ng-model .I want to check whether user has entered or modified any data in a particular tab during submit.
myForm.$dirty will check whether user has interacted with the form. But I need to check controls are filled in particular tabs and give some appropriate messages . So can i check angularjs watch or ng-dirty for each controls and verify that user has modified data. Is there any other good solution for the same?
In angularjs you can make very different validations when using forms and classes like ng-dirty and ng-touched.
This way u can check wether determined control has been modified.
ng-dirty: the control has been interacted with
ng-touched: the control has been blurred
Also you can check validity or other similar things.
U have all the docs at:
https://docs.angularjs.org/guide/forms
Anyway, you can also check this with the FormController
https://docs.angularjs.org/api/ng/type/form.FormController
And then show the messages with angular directives for bootstrap (see Modals)
https://angular-ui.github.io/bootstrap/
As you say, you have different controls and you need to show different messages depending on the control and on the user´s input. Then I think the way you musts code it, is by looking for ng-dirty or ng-touched
There you have an example about how using it:
http://www.w3schools.com/angular/angular_validation.asp
Hope it can help!!
I know there is a $setPristine() function for the form element, is there an equivalent if I want single to set to ng-pristine single element tags like <input>?
The concept of pristine applies to a form as a whole and not to individual elements. A pristine form is one which has not yet been modified while a dirty form is one that has been changed. There are no semantics of flagging a input element unrelated to a form as pristine and for input elements in a form, the pristine flag applies solely to the form.