Angular form reset after validation

Question

I am using angular js for validation on form its working fine but after form is valid i am sending ajax request and resting it with jquery code, So my form still shows valid. Here is following js snippet:

var myApp = angular.module('myApp', []);

myApp.controller('myController', function ($scope) {    

    $scope.clearForm = function (formId) {
        $(formId)[0].reset();
        console.log($scope.note['title'])
        //$scope.note['title'] = null;
    };

    $scope.submitForm = function () {
        if ($scope.noteForm.$valid) {
            alert("valid");
            //ajax request
            $scope.clearForm('#noteForm');
        }
    }
});

Fiddle Demo

If i am setting blank value with $scope.note['title'] = null; it shows error after clearing.

Fiddle Demo

How can i resolve this? what i want is after resting from should goes to initial state.

Pankaj Parkar · Accepted Answer · 2015-06-19 09:34:38Z

1

Rather than clearing form in jQuery, I'd prefer you to use $setPristine() method on form that will make form as pristine in angular way. Also you need to clear form fields just by doing $scope.note = {}.

Code

$scope.clearForm = function (formId) {
    $scope.noteForm.$setPristine(); //you should use setPristine that will make for pristine
    $scope.note = {}; //this will clear a form values.
};

Demo Fiddle

edited Jun 19, 2015 at 9:34

answered Jun 19, 2015 at 9:12

Pankaj Parkar

136k23 gold badges241 silver badges307 bronze badges

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

Collectives™ on Stack Overflow

Angular form reset after validation

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related