具有Form和$ setPristine的Angular 1.5组件

debugcn 发表于 Dev

麦克风

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

我有工作的形式，因为我有模型绑定，可以在提交时获取数据。因此，我90％都想成为自己想去的地方，所缺少的是能够使用$ setPristine正确地重置表单。

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

form.html

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

form.component.js

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

Plnkr中的完整代码

我还尝试将$ 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();
  };
}