控制器中未定义的角度形式答案

【问题标题】：Angular Form Undefined In Controller控制器中未定义的角度形式
【发布时间】：2017-07-04 21:35:15
【问题描述】：

有一个我要传递到我的控制器的角度形式。

当我打开浏览器检查表单时，它是未定义的。我尝试更改表单的名称，并移动表单标签以包围整个正文。这是我的表格：

         <form layout-padding id="form-container" ng-controller="RegisterController as RgCtrl" layout="column" ng-cloak name="projectForm">
          <div id="content-row-header">What is your email?</div>
          <md-input-container class="md-block md-input-focused">
            <label>Email</label>
            <input required type="email" name="email" ng-model="email"
                   minlength="10" maxlength="100" ng-pattern="/^.+@.+\..+$/" />
            <div ng-messages="projectForm.email.$error" role="alert">
              <div ng-message-exp="['required', 'minlength', 'maxlength', 'pattern']">
                Your email must be between 10 and 100 characters long and look like an e-mail address.
              </div>
            </div>
          </md-input-container>
          <div id="content-row-header">Set a password</div>
          <md-input-container class="md-block md-input-focused">
            <label>Password</label>
            <input required name="password" ng-model="password">
            <div ng-messages="projectForm.password.$error">
              <div ng-message="required">This is required.</div>
            </div>
          </md-input-container>
        </form>

这是我的函数调用：

<md-button id="orange-button" ui-sref="app.unauthenticated.purchase.agent" ng-click="doRegistration(projectForm)" flex>Create Account</md-button>

这是我的控制器：

 (function () {
  'use strict';

  angular
    .module('app.auth.register')
    .controller('RegisterController', RegisterController);

  /** @ngInject */
  function RegisterController($scope, $auth, $log, $location,$rootScope,$state,app_auth,$stateParams) {
    // Data
    var vm = this;

    // Methods
    $scope.doRegistration = function (form) {
      console.log(form);
      app_auth.register(form.email.$viewValue,form.password.$viewValue,form.passwordConfirm.$viewValue);
    };


    // $scope.goHome = function () {
    /
/   $state.go('app.public');
    // };
  }
})();

现在当 console.log(form) 运行时，表单是未定义的

【问题讨论】：

$state.go('app.public');应该评论吗？
刚刚发布了一个答案，请您添加md-input-container的sn-p

标签： html angularjs angular-material

【解决方案1】：

如果你在表单中有一些条件指令：

<form name="myForm" ng-if="someVariable">

那么$scope.myForm 将在您的控制器中未定义。

此外，您应该使用 ng-submit。

【讨论】：

【解决方案2】：

您正在使用指令。 指令范围与控制器不同。这就是您看不到表单参考的原因。

转到指令实现并添加：

scope: {
  projectForm: '=',
},

参考：https://www.sitepoint.com/form-based-directives-angularjs/

【讨论】：

【解决方案3】：

name 属性会将表单控制器绑定到 $scope，所以你的控制器中有name="projectForm" 你应该可以使用$scope.projectForm

在这里查看 jsfiddle

https://jsfiddle.net/hurricanew/6tqywue6/

【讨论】：

【解决方案4】：

注册控制器必须包含表单定义和以表单为参数的函数

【讨论】：