0

在我们的 Angular 应用程序中，我们有一个带有验证和重置按钮的表单。我们基于文档中的示例：https ://docs.angularjs.org/guide/forms

当有人在字段处于无效状态时尝试重置表单时，就会出现问题。我的期望是重置后，该字段应重置为初始值，并且任何验证也将被重置。但是，我还没有弄清楚如何清除验证。

这可以在文档中的上述示例中进行演示：https ://docs.angularjs.org/guide/forms 加载演示并输入无效的电子邮件地址 ( potatoes)，然后按重置。它会重置有效字段，但不会无效。我们已经尝试使用$setPristine()和摆弄$valid也没有导致任何地方。这似乎是一个直接的用例，但我无法找到任何答案。请有人指出我们忽略的微不足道的解决方案！

更新：从https://docs.angularjs.org/guide/forms添加代码

<div ng-controller="ExampleController">
  <form novalidate class="simple-form">
    Name: <input type="text" ng-model="user.name" /><br />
    E-mail: <input type="email" ng-model="user.email" /><br />
    Gender: <input type="radio" ng-model="user.gender" value="male" />male
    <input type="radio" ng-model="user.gender" value="female" />female<br />
    <button ng-click="reset()">RESET</button>
    <button ng-click="update(user)">SAVE</button>
  </form>
  <pre>form = {{user | json}}</pre>
  <pre>master = {{master | json}}</pre>
</div>

<script>
  angular.module('formExample', [])
    .controller('ExampleController', ['$scope', function($scope) {
      $scope.master = {};

      $scope.update = function(user) {
        $scope.master = angular.copy(user);
      };

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

      $scope.reset();
    }]);
</script>
4

1 回答 1

0

我有同样的问题，我在这里找到了解决方案：https ://github.com/angular/angular.js/issues/10027#issuecomment-62857430

解决方案是首先将对象的所有字段设置为空值，然后使用相同类型的空对象重置，而不是使用 {}。

这是一个显示解决方案的 plunkr： https ://plnkr.co/edit/qKAI4OlmCbu2HNM237Z3?p=preview

angular.module('myApp', [])
  .controller('myCtrl', ['$scope', function ($scope) {
    function getEmpty() {
      return {
      name: '',
      contact: {email: ''}
    };
    }

    $scope.manufacturer = getEmpty();

    $scope.reset = function() {
      $scope.manufacturer = getEmpty()
      $scope.form.$setPristine();
      $scope.form.$setUntouched();
      $scope.form.$setValidity();
    }
  }]);
于 2016-10-24T13:31:31.227 回答