使用控制器作为语法在角度 1.5 中形成重置错误

Question

使用 angular 1.5 这是非常基本的问题

当我点击表单的重置按钮时；它在控制台中给出错误

无法读取未定义的属性“$setPristine”

下面是我的相关代码

form.html

 <form name="loginForm" ng-controller="LoginController as vm" ng-submit="vm.login(credentials)" novalidate >  
  ...form details ...
 <button type="reset" class="btn btn-warn" ng-click="vm.reset()">Reset</button>

login.controller.js

login
  .controller('LoginController', function($scope){
    var self = this;

   self.reset = function () {
      self.loginForm.$setPristine();
      self.loginForm.$setUntouched();
    };

即使我尝试使用form="form.loginForm"，但没有成功

请提出问题所在。这里是my full code plunker

Answer 1

如果你想在你的控制器中访问你的form 并且你使用controller as 语法，只需将你的表单名称更改为这种格式：name="alias.formName"

由于您在将控制器声明为ng-controller="LoginController as vm" 时使用的是vm，因此您的表单应为：

<form name="vm.loginForm" ng-controller="LoginController as vm" ng-submit="vm.login(credentials)" novalidate >

也不要忘记更改您的 ngMessages 块。

<div ng-messages="vm.loginForm.username.$error" ng-if="vm.loginForm.username.$touched">
   <p ng-message="required">Your name is required.</p>
   <p ng-message="minlength">Your name is too short.</p>
</div>

更新：

使用$setPristine 只会生成$pristine 表单，它不会重置表单字段的值。如果您的目标也是重置表单字段值，那么您必须在重置函数中设置self.credentails = {username: '',password: ''}。

Answer 2

有几个问题：

1. 您没有使用相同版本的 angular 和 angular-messages
2. 您的 plunkr 不使用ng-controller="LoginController as vm"，而是使用ng-controller="LoginController"
3. 您希望表单在控制器中，但它在 $scope 中，因为您使用 name="loginForm" 而不是 name="vm.loginForm"