Question

在我们的角度应用程序中，我们有一个带有验证和重置按钮的表单。我们根据文档中的示例进行了基础：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>

Answer 1

我遇到了同样的问题，我在这里找到了解决方案：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();
    }
  }]);

如何在重置时使用角度重置验证？

更新：从https://docs.angularjs.org/guide/forms

1 个答案: