AngularJS v1.5.5 重置表单不适用于无效的输入字段

Question

我有下面的代码（或查看 fiddle），我尝试重置表单并清除每个表单的所有输入字段。

使用 AngularJS 版本 1.2.1 工作正常！但在我的应用程序中，我使用 1.5.5 版本，因为我有其他库使用需要此版本的 material 框架来分隔 <md-tab> 标签中的嵌套表单。

problem 是当任何字段无效时 reset 不会按预期工作，这些字段保持不变而不是清楚。

当我点击重置按钮时，还有另一种清除所有字段（嵌套形式）的方法吗？

angular.module("main", [])
  .controller("register", function($scope) {
    $scope.data = {
      A: {},
      B: {}
    };

    $scope.reset = function(form) {
      form.$setPristine();
    };

  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.1/angular.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
<body ng-app="main">
  <div ng-controller="register" class="form">

    <form name="form" novalidate role="form">

      <div class="form">


        <h1>TAB1 - Form A:</h1>
        <ng-form name="A">
          A1:
          <input type="text" ng-model="data.A.A1" ng-minlength="4" ng-maxlength="15" />A2:
          <input type="text" ng-model="data.A.A2" ng-minlength="4" ng-maxlength="15" />
          <button type="button" ng-disabled="A.$pristine" ng-click="reset(A); data.A=null;">Reset</button>
          <br/>
          <strong>A.$pristine =</strong> {{A.$pristine}}
          <strong>A.$valid =</strong> {{A.$valid}}
        </ng-form>
      </div>
      <br/>
      <br/>

      <div class="form">


        <h1>TAB2 - Form B:</h1>
        <ng-form name="B">
          B1:
          <input type="text" ng-model="data.B.B1" ng-minlength="4" ng-maxlength="15" />B2
          <input type="text" ng-model="data.B.B2" ng-minlength="4" ng-maxlength="15" />

          <button type="button" ng-disabled="B.$pristine" ng-click="reset(B); data.B=null;">Reset</button>
          <br/>
          <strong>B.$pristine =</strong> {{B.$pristine}}
          <strong>B.$valid =</strong> {{B.$valid}}
        </ng-form>
      </div>
    </form>

    <h1>data:</h1>
    <pre>{{data | json}}</pre>

  </div>
</body>

Answer 1

这是因为 ng-model 通过 $scope.data 中的 reference 绑定到 A 和 B 对象。如果您从 ng-click 中删除 $scope.data.A = null 并在不创建新对象的情况下重置对象，它会起作用：

https://jsfiddle.net/utwf604r/15/

$scope.reset = function (form)
{
  // don't change the reference to A
  // $scope.data.A = {} wont work!!
    angular.extend($scope.data, {A:{A1:'',A2:''}, B:{B1:'',B2:''}});
    form.$setPristine();
};

AngularJS v1.5.5 重置表单不适用于无效的输入字段

AngularJS v1.5.5 Reset form not working for invalid input fields

angularjs

angularjs-material