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

时间:2016-07-28 20:50:19

标签: html angularjs angular-material

有一个我传入控制器的角形。

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

         <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(表单)运行时,表单未定义

4 个答案:

答案 0 :(得分:0)

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

转到指令实施并添加:

scope: {
  projectForm: '=',
},

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

答案 1 :(得分:0)

如果您在表单中有一些条件指令:

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

然后您的控制器中将$scope.myForm未定义。

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

答案 2 :(得分:0)

name属性会将表单控制器绑定到$ scope,因此您可以在控制器中使用name="projectForm" 使用$scope.projectForm

在这里检查jsfiddle

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

答案 3 :(得分:-1)

注册管理机构必须包含形式定义和函数,其形式为参数