在 Angular 中，如何在控制器的 $scope 中获取表单？

Question

拥有这两个文件：

HTML：

<form name="registrationForm" ng-submit="registerUser()">
   ...
</form>

JS（在 Angular 控制器内部）：

$scope.registrationForm.confirmPassword.$setValidity("PasswordsMatch", $scope.validation.doPasswordsMatch);

我收到Cannot read property 'confirmPassword' of undefined的错误

这让我相信我无法访问控制器中的registrationForm 表单。基于此 (https://docs.angularjs.org/api/ng/type/ngModel.NgModelController) 我想我应该这样做。

我见过的其他解决方案包括在提交表单时将表单传递给控制器​​，但我需要做的事情（设置自定义验证）需要在此之前发生。

其他解决方案提到通过ng-controller 将控制器添加到表单中，但这并没有改变。

编辑： 从上面的网站看，是不是有原因，为什么在这里（https://plnkr.co/edit/ZT0G6ajdbescT72qLKSU?p=preview）$scope.myForm 可以访问，但只能在$scope.setEmpty 函数内部？

Answer 1

我建议为此使用控制器本身而不是 $scope 提供程序。这是我在使用 angularjs 时遇到的第一个问题

在您的控制器中：

function MyController($scope) {
  var vm = this;
  vm.registrationForm.confirmPassword.$setValidity("PasswordsMatch", $scope.validation.doPasswordsMatch);
}

在您的表单中：

<form name="vm.registrationForm" ng-submit="registerUser()">
   ...
</form>

唯一的问题是您需要在路由或 ngInclude 中指定 controllerAs 属性：

ng-include="templates/my-template.html" ng-controller="MyController as vm"

或

when('/my-route', {
  templateUrl: 'templates/my-template.html',
  controller: 'MyController as vm'
 })

Answer 2

你需要给表单元素添加一个name属性。

<form name="registrationForm" ng-submit="registerUser()">
   ...
</form>

Answer 3

这种形式确实必须依赖于控制器。请看示例：

angular.module("fooApp",[]);

angular.module("fooApp")
  .controller("formctl",function(){
    this.user={};
    this.dosave=function(){
      if(this.user.pwd == this.user.confpwd)
        alert(this.user.username+" logged");
      else
        alert("pwd does not match");
    };
  });

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.8/angular.min.js"></script>
<div ng-app="fooApp">
  <h1>sample</h1>
  <div ng-controller="formctl as ctl">
    <form ng-submit="ctl.dosave()">
      <label>username</label><br/>
      <input ng-model="ctl.user.username" required/><br/>
      <label>password</label><br/>
      <input ng-model="ctl.user.pwd" type="password" required/><br/>
      <label>confirm password</label><br/>
      <input ng-model="ctl.user.confpwd" type="password"/><br/>
      <input type="submit"/>
    </form>
  </div>
</div>

Answer 4

您需要将表单传递给提交函数以将整个表单传递给控制器​​。使用表单名称。

<form name="registrationForm" ng-submit="registerUser(registrationForm)">
...
</form>

另一种选择是将输入作为参数直接传递

<form name="myForm" novalidate >
  some input: <input type="text" name="sometext" ng-model="myInput">
  <input type="submit" ng-click="doAction(myInput)">
</form>

快速插入 https://plnkr.co/edit/s0Al2LTHkvUPoLYNzTpm?p=info

如果您只是在输入的值之后，则更容易测试您是否在方法上具有您期望的显式参数，而不是在整个表单中转储。