$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 stackoverflow.com/questions/26015010/angularjs-form-reset-error stackoverflow.com/questions/20865125/angularjs-form-reset stackoverflow.com/questions/27191744/setpristine-not-working stackoverflow.com/questions/19431335/… stackoverflow.com/questions/32029889/… — Vishal Singh
– Vishal Singh, Commented Dec 28, 2015 at 7:28
@AlainIb 1st place, why should he define ContactForm in controller? — Pankaj Parkar
– Pankaj Parkar, Commented Dec 28, 2015 at 7: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
– JB Nizet, Commented Dec 28, 2015 at 7:31
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
– Vishal Singh, Commented Dec 5, 2016 at 6:37

ChrisY · Accepted Answer · 2015-12-28 08:06:28Z

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, 2015 at 8:06

ChrisY

1,80311 silver badges13 bronze badges

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

Comments

Preston · Accepted Answer · 2015-12-29 20:47:52Z

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!

Collectives™ on Stack Overflow

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

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related