angularjs form reset error

Question

i\'m trying to do a form with validations using angularjs and so far i did a good job. But when i commit my reset button all the fields reset except for the error messages i

Answer 1

To reset the validations we have to do two things:

1. clear the fields

2. Add the following:

   $scope.programCreateFrm.$dirty = false;
   $scope.programCreateFrm.$pristine = true;
   $scope.programCreateFrm.$submitted = false;
   

programCreateFrm is the name of the form. For example:

<form name="programCreateFrm" ng-submit="programCreateFrm.$valid && createProgram(programs)" novalidate>

This code is working for me.

Answer 2

My form is inside another scope so my solution need to use $$postDigest

$scope.$$postDigest(function() {
    $scope.form.$error = {};
});

Answer 3

To me using $setPristine to reset the form is a hack. The real solution is to keep it like it should be:

<button type="reset" ng-click="reset()"></button>

then in angular:

var original = angular.copy($scope.user);
$scope.reset = function() {
   $scope.user = angular.copy(original);
};

and that's it.

Answer 4

I kept the type="reset" in my button. What I did was the ng-click="resetForm(userForm)" (using userFrom to match your example) and the controller defines resetForm() as

scope.resetForm = function(controller) {
  controller.$commitViewValue();
  controller.$setPristine();
};

Here is what happens:

1. When the reset button is clicked, it will bring back the original values as specified by the value attribute on the input
2. The $commitViewValue() will force the write of whatever is on the view presently to the $modelValue of each field (no need to iterate manually), without this the last $modelValue would still be stored rather than reset.
3. The $setPristine() will reset any other validation and submitted fields.

In my angular-bootstrap-validator I already had the FormController as such I didn't need to pass in the form itself.

Answer 5

In My Form

<form angular-validator-submit="submitReview()" name="formReview"  novalidate angular-validator>

 <input type="text" name="Rating" validate-on="Rating" class="form-control"
   ng-model="Review.Rating" required-message="'Enter Rating'" required>
  <button type="button" ng-click="reset()">Cancel</button>
 </form>


app.controller('AddReview', function ($scope) {

    $scope.reset= function () {
        $scope.formReview.reset() 
    };
});

only need to call $scope.formReview.reset() where formReview is my form name.

Answer 6

There's API documentation on the FormController.

This allowed me to find that there's other methods to call such as:

$setUntouched() - which is a function I was using if the user has focused on the field, and then left the field, this clears this feature when you run it.

I created a simple form reset function which you can use too.

// Set the following in your controller for the form/page.
// Allows you to set default form values on fields.
$scope.defaultFormData = { username : 'Bob'}
// Save a copy of the defaultFormData
$scope.resetCopy = angular.copy($scope.defaultFormData);
// Create a method to reset the form back to it's original state.
$scope.resetForm =  function() {
    // Set the field values back to the original default values
    $scope.defaultFormData = angular.copy($scope.resetCopy);
    $scope.myForm.$setPristine();
    $scope.myForm.$setValidity();
    $scope.myForm.$setUntouched();
    // in my case I had to call $apply to refresh the page, you may also need this.
    $scope.$apply();
}

In your form, this simple setup will allow you to reset the form

<form ng-submit="doSomethingOnSubmit()" name="myForm">
    <input type="text" name="username" ng-model="username" ng-required />
    <input type="password" name="password" ng-model="password" ng-required />
    <button type="button" ng-click="resetForm()">Reset</button>
    <button type="submit">Log In</button>
</form>