Angular js set form to Pristine false

Question

I've a html form and I'm adding validation to each input within the from using angular js.

But I don't want to show the validation error initially when the html loads, until the user makes some changes in the form.

So I've validation like:

<form name="addApplicationForm" accept-charset="UTF-8" novalidate>
    <input type="text" name="name" ng-model="applicationData.application_name" required>
    <div ng-show="addApplicationForm.name.$invalid && !addApplicationForm.name.$pristine">
      <span class="error" ng-show="addApplicationForm.name.$error.required">Please enter application name.</span>
    </div>
    <button ng-click="submit()">Submit</button>
</form>

And this form works as I expected. Now if the user directly clicks the submit button without making any change in the input, the $pristine state is still true and the error does now shows. But here I want to show the validation error to the user.

That's why on submit, I want to set the $pristine state of the form to false, but I'm not seeing a method for it.

I also tried with $dirty instead of $pristine like:

<form name="addApplicationForm" accept-charset="UTF-8" novalidate>
    <input type="text" name="name" ng-model="applicationData.application_name" required>
    <div ng-show="addApplicationForm.name.$invalid && !addApplicationForm.name.$dirty">
      <span class="error" ng-show="addApplicationForm.name.$error.required">Please enter application name.</span>
    </div>
    <button ng-click="submit()">Submit</button>
</form>

And on submit I just call the setDirty method to make the form dirty and thus it shows the error on the submit button click.

But here the problem is, I also have a reset button in the form. Once clicked, I want to clear all the fields of the form and then I need to make the dirty flag of the form to false but I don't have any such option. But for this case if I use $pristine I've $setPristine().

So in this case whatever I use $dirty or $pristine, I've one issue here.

Please tell me what could be the solution.

if the answer is not enough, please provide minimal working snippet with your submit and reset button. — zoom
– zoom, Commented Aug 3, 2016 at 22:14

zoom · Accepted Answer · 2016-08-03 22:13:30Z

4

$pristine and $dirty should work together. Using $setPristine will set the $pristine property of the form to true and $dirty to false. $setDirty will do the contrary.

It seems that your issue is related to the fact that you are testing the $pristine and $dirty properties of a field of your form (see https://docs.angularjs.org/api/ng/type/ngModel.NgModelController). Doing $setPristine on your form controller also propagates to every fields of the form, while $setDirty does not.

You can have a look at the source code of angular, where the property are set (#setPristine and #setDirty), this code portion is explicit and easy to read : https://github.com/angular/angular.js/blob/master/src/ng/directive/form.js

answered Aug 3, 2016 at 22:13

zoom

1,7762 gold badges16 silver badges27 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Indranil Mondal Over a year ago

Thank you, it works. Actually I was not aware that $setDirty makes the form dirty not the input fields and if I use setPristine it makes the form dirty as false.

developer033 · Accepted Answer · 2016-08-04 00:29:11Z

0

In this specific case, you don't need to set your form to anything.

You just have to change your check to:

<div ng-show="addApplicationForm.name.$invalid && addApplicationForm.name.$dirty">

I'd recommend you to use this directive.

Also to check this tutorial.

answered Aug 4, 2016 at 0:29

developer033

25k8 gold badges85 silver badges113 bronze badges

Collectives™ on Stack Overflow

Angular js set form to Pristine false

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related