Angular 表单在控制器中未定义

Question

有一个 angular 表单，我正在将其传递到我的控制器中。

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

         <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) 运行时，form 是未定义的

Answer 1

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

Answer 2

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

转到指令实施并添加：

scope: {
  projectForm: '=',
},

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

Answer 3

如果您有以下形式的条件指令：

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

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

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

Answer 4

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

在此处检查 jsfiddle

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

Angular 表单在控制器中未定义

Angular Form Undefined In Controller

html

angularjs

angular-material