重置angularjs表单

Question

我有这样的表格，

<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>

我正在尝试在调用时重置此表单

        vm.addNewStakeHolder = function(id){

            vm.stakeHolder =  {}
       }

但仍然存在验证错误。它没有隐藏。我尝试了“setPristine”和“setValidity”。但没有奏效。有什么帮助吗？

Answer 1

我不确定你想做什么，但我假设通常的用户友好的表单验证行为，在用户交互后出现验证错误（不是立即，因为它有点在你的脸上）。

我添加了一个工作 sn-p（角度 v1.4.x），它也使用了ngMessages 模块。

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>

我建议不要使用 showErrors 模块，因为在较新的 Angular 版本中，这些功能可以通过 ngModelOptions 简单地实现。

如果您想重用表单验证模板：请查看ngMessagesInclude 指令。

Answer 2

根据AngularJs docs for form.FormController，您可以通过强制进入原始状态来重置表单验证。检查以下示例：

vm.addNewStakeHolder = function(id){

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

此外，您只能在字段脏时显示消息：

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

</div>