带有 Form 和 $setPristine 的 Angular 1.5 组件

我正在尝试在 Angular 1.5 的组件中使用表单

我的表单可以正常工作，因为我有模型绑定并且可以在提交时获取数据。所以我已经完成了 90% 的目标，缺少的是能够使用 $setPristine 正确重置表单。

我尝试了几种方法，第一种方法是将表单作为参数传递给重置函数。

表单.html

<form name="$ctrl.userForm">
  ...
  <input class="btn btn-default" type="button" ng-click="$ctrl.reset($ctrl.userForm)" value="Reset" />
</form>

表单组件.js

ctrl.reset = function(userForm) {
    ctrl.user = {};
    userForm.$setPristine // Cannot read property '$setPristine' of undefined
};

Plnkr 中的完整代码 http://plnkr.co/edit/0mqPcq6gwav9JKQkgkfP?p=preview

我还尝试将 $ctrl.userForm 声明为空对象 $onInit，但这似乎也不起作用。删除 $setPristine 行后，重置可以清除表单数据，但不能从角度角度清除其状态。

对我所缺少的有什么想法吗？

从你的 plunkr 中你可以得到下面声明的整个组件。

function formController() {
  var ctrl = this;
  ...

  ctrl.reset = function(userForm) {
    ctrl.user = {};
    userForm.$setPristine
  };

  ctrl.reset();
}

错误源自这一行ctrl.reset();在不发送参数的情况下调用方法的地方userForm。另外，您正在使用$setPristine以错误的方式，您也不必将表单作为参数传递。

我建议您使用控制器上声明的表单，如下所示：

angular
  .module('application')
  .component('mkForm', {
    templateUrl: 'form.html',
    controller: formController
  });

function formController() {
  var ctrl = this;
  ctrl.master = {};

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

  ctrl.reset = function() {
    ctrl.user = {};
    ctrl.userForm.$setPristine();
  };
}

Note:你不必打电话ctrl.reset();因为原始状态是默认状态。