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

您需要为表单元素添加名称属性。

<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

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

<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

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

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

4 个答案: