Resetting angularjs form

Question

I have a form like this,

<form name="stakeholderForm">
        <div class="form-group evy_aboutme_cl05">
            <div class="form-group evy_form_edit" show-errors>
                <label for="InputFname">First Name</label>
                <input type="text" name="fname" class="form-control" id="InputFname" placeholder="" ng-model="vm.stakeHolder.first_name" ng-blur="vm.saveStakeholder();" required>
                <div ng-if="stakeholderForm.fname.$error.required" ng-messages="stakeholderForm.fname.$error" ng-include="'app/shared/messages.html'"></div>
                <!-- <div ng-if="vm.firstname" class="evy_user-preference_error">First name is required</div> -->
            </div>
            <div class="form-group evy_form_edit" show-errors>
                <label for="InputLname">Last Name</label>
                <input type="text" name="lname" class="form-control" id="InputLname" placeholder="" ng-model="vm.stakeHolder.last_name" ng-blur="vm.saveStakeholder();" required>
                <div ng-if="stakeholderForm.lname.$error.required" ng-messages="stakeholderForm.lname.$error" ng-include="'app/shared/messages.html'"></div>
                <!-- <div ng-if="vm.lastname" class="evy_user-preference_error">Last name is required</div> -->
            </div>
        </div>
        <div class="form-group evy_insights_tag_cmpny" show-errors>
            <label>Company</label>
            <evy-typeahead c-type="company" prompt="Type min 3 charaters for a Company" title="company" subtitle="company_id" model="vm.stakeHolder.company" model-id="vm.company_id" on-blur="vm.saveStakeholder();" required="true"></evy-typeahead>
            <!-- <div ng-if="vm.companyname" class="evy_user-preference_error">Company name is required</div> -->
            <div ng-if="stakeholderForm.name.$error.required" ng-messages="stakeholderForm.name.$error" ng-include="'app/shared/messages.html'"></div>
        </div>
    </form>

And I am trying to reset this form on calling

        vm.addNewStakeHolder = function(id){

            vm.stakeHolder =  {}
       }

But still validations errors are there.It's not hiding out.I tried 'setPristine' and 'setValidity'.But not worked.Any help?

One thing: on your form element you need novalidate to disable the browsers native form validation. `
...
` — dinony, Nov 01 '16 at 14:12
You have the `required` attributes on your input elements. So, when setting the model to an empty object, the errors are naturally set, which is also expected. Maybe you could try to use the `ngRequired` directive. `` — dinony, Nov 01 '16 at 14:28

lenilsondc · Answer 1 · 2016-11-01T14:51:38.563

0

According to AngularJs docs for form.FormController You can reset form validation by forcing a pristine state. Check the following example:

vm.addNewStakeHolder = function(id){

    vm.stakeHolder =  {};
    vm.stakeholderForm.$setPristine();
    vm.stakeholderForm.$setUntouched();
}

Also, you can display messages only when the field is dirty:

<div
    ng-if="stakeholderForm.fname.$dirty && stakeholderForm.fname.$invalid."
    ng-messages="stakeholderForm.fname.$error"
    ng-include="'app/shared/messages.html'">

</div>

edited Nov 01 '16 at 14:51

answered Nov 01 '16 at 14:20

lenilsondc

9,590
2
25
40

Could you please try with `vm.stakeholderForm.$setUntouched();`? Updated my answer as well – lenilsondc Nov 01 '16 at 14:27

dinony · Accepted Answer · 2016-11-01T15:19:02.627

I'm not exactly sure what you want to do, but I assume the usual user friendly form validation behaviour, where validation errors are presented after the user has interacted (not immediately, since it's kinda in your face).

I added a working snippet (angular v1.4.x), which also makes use of thengMessages module.

angular.module('TestApp', ['ngMessages'])
.controller('TestFormController', function($scope) { 
  var vm = this;
 
  vm.data = {
    first: 'hmm'
  };
  
  vm.reset = function() {
    // Reset data to empty object
    vm.data = {};  
    
    // Iterate over controls and set pristine
    for(var key in $scope.form) {
      if($scope.form.hasOwnProperty(key) && !key.startsWith('$')) {
        $scope.form[key].$setPristine();
      }
    }
  };
  
  vm.save = function() {
    // TODO: maybe http call?
    if($scope.form.$valid) {
      console.log('Saved');
    } else {
      console.log('Form invalid: Cannot save');
    }
  };
});

.help-block {
  display:none;
}
  
.has-error .help-block {
  display:block;
}

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.12/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.12/angular-messages.min.js"></script>

<div ng-app="TestApp">
  <form name="form" novalidate ng-controller="TestFormController as test">
    <div ng-class="{'has-error': form.first.$dirty && form.first.$invalid}">
      <label>First Name</label>
      <input type="text" name="first" ng-model="test.data.first" ng-blur="test.save();" required>
      <div ng-messages="form.first.$error">
        <div class="help-block" ng-message="required">Required :(</div>
      </div>  
    </div>
    <button ng-click="test.reset()">Reset</button>
  </form>
</div>

I would advise not to use the showErrors module, since in newer angular versions these features may be implemented simply via ngModelOptions.

If you want to reuse form validation templates: please have a look at the ngMessagesInclude directive.

Resetting angularjs form

2 Answers2