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 zoom · Accepted Answer · 2016-08-03T22:13:30

$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

Angular js set form to Pristine false

2 Answers