使用控制器As语法在角度1.5中重置错误

Question

使用角度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"

由于您在将控制器声明为vm时使用ng-controller="LoginController as 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"