$setPristine() not working for form reset with angular 1.4

Question

HTML :

<form name="ContactForm" novalidate >
    <div class="list">
      <label class="item item-input">
        <input type="text" placeholder="First Name" ng-model="contact.firstName" name="uFirstName" required="" autocomplete="off"/>
      </label>
        <br>
        <div ng-show="ContactForm.$submitted || ContactForm.uFirstName.$touched" ng-hide="hidespan">
        <span class="error" ng-show="ContactForm.uFirstName.$error.required">Tell us your First Name.</span>
        <span class="error" ng-show="ContactForm.uFirstName.$error.text">This is not a valid First Name.</span>
        </div> 
        </div>
    <button class="button button-block button-assertive" ng-click="ContactForm.$valid && contactReq(contact)">
      Submit
    </button> 
    </form>

JS

var defaultForm = {
        firstName : "",
        lastName : "",
        email : "",
        message : ""
    }

    $scope.contact = angular.copy(defaultForm);

    $scope.contactReq = function(contact){
        $scope.ContactForm.$setPristine();
        $scope.contact = angular.copy(defaultForm);
        console.log('empty');
    }

I am using AngularJS v1.4.3 for phonegap development. I want to reset the form after clicking the submit button. But when i am doing set Pristine i am getting the following error: "ERROR: Error: undefined is not an object (evaluating '$scope.ContactForm.$setPristine')" I tried many links related same but nothing is working for me.

Any help is highly appreciated.

links that i tried http://stackoverflow.com/questions/26015010/angularjs-form-reset-error http://stackoverflow.com/questions/20865125/angularjs-form-reset http://stackoverflow.com/questions/27191744/setpristine-not-working http://stackoverflow.com/questions/19431335/reset-angular-form-with-setpristine http://stackoverflow.com/questions/32029889/angular-setpristine-not-working — Vishal Singh, Dec 28 '15 at 07:28
@AlainIb 1st place, why should he define `ContactForm` in controller? — Pankaj Parkar, Dec 28 '15 at 07:31
Post a **complete** minimal example reproducing the problem. My guess is that your form is inside a `ng-if`, or another directive which has its own scope. — JB Nizet, Dec 28 '15 at 07:31
@pankaj because he try to make `$scope.ContactForm.$setPristine();` — AlainIb, Dec 28 '15 at 07:33
@AlainIb sir do look at the the form API, how it works with angular, angular does create form name `object` internally, with all its validation properties for each form field — Pankaj Parkar, Dec 28 '15 at 07:34
Try: `this.ContactForm.$setPristine();` If it works you have a scope issue, just like @JB Nizet wrote. — tasseKATT, Dec 28 '15 at 07:35
Here is example plunkr http://plnkr.co/edit/mCH8e2xLMrSlVzWsVDID?p=preview — Pankaj Parkar, Dec 28 '15 at 07:42
I tried "this.ContactForm.$setPristine();" but got Error: this.ContactForm.$setPristine is not a function. (In 'this.ContactForm.$setPristine()', 'this.ContactForm.$setPristine' is undefined) — Vishal Singh, Dec 28 '15 at 08:08
using $scope getting "Error: undefined is not an object (evaluating '$scope.ContactForm.$setPristine')" — Vishal Singh, Dec 28 '15 at 08:11
Hello @Jose ..Yes, I have fixed this issue...by adding $scope.untouched = false; $scope.ContactForm.$setUntouched();.....Also I am refreshing my page after submit. — Vishal Singh, Dec 05 '16 at 06:37

score 0 · Answer 1 · answered Dec 28 '15 at 08:06

0

ContactForm should be on the scope. Just a guess: Copy the values of the default form to the model before you call setPristine()

answered Dec 28 '15 at 08:06

ChrisY

1,681
10
12

score 0 · Answer 2 · answered Dec 29 '15 at 20:47

I had a strange issue using Safari 9.01. My form inputs were not editable after I switched from my Login to Registration page.

So I tried using the $setPristine() method and experienced the same problem. I found that putting a timeout in the reset function allowed me to access the form.

You could try:

    $scope.contactReq = function(contact){
        $timeout(function(){
            $scope.ContactForm.$setPristine();
            $scope.contact = angular.copy(defaultForm);
            console.log('empty');
        },10);
    }

If that doesn't work try using this.ContactForm.$setPristine(); instead of $scope.ContactForm.$setPristine();

My problem ultimately ended up being a issue with the way I was using ui-router to change between my views.

Good luck!

$setPristine() not working for form reset with angular 1.4

2 Answers2