表单在控制器中未定义答案

【问题标题】：form is undefined in controller表单在控制器中未定义
【发布时间】：2014-12-18 03:52:31
【问题描述】：

我有一个表格...

<form name="userForm" ng-submit="setUsers()">
  <input type="number" class="form-control" name="users" ng-model="users.num" required>
  <button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Continue</button>
</form>

在我的控制器中，我想查看表单是否为$pristine...

angular.module('myApp')

.controller('myController', ['$http', '$scope', function($http, $scope) {
  $scope.userForm = {};
  $scope.users = {};

  console.log($scope.userForm) //empty object
  console.log($scope.userForm.$pristine); // undefined
  console.log($scope.users); //empty object
  console.log($scope.users.num); //undefined

}]);

我做错了什么导致无法在控制器中获取表单？我正在使用 AngularJs 1.3

谢谢！

【问题讨论】：

这意味着某些东西正在重新定义您的 $scope
可能是因为您将它们设置为控制器中的空对象。你试过注释掉这两行吗？

标签： javascript angularjs forms input

【解决方案1】：

您必须等待表格可用。如果您在加载控制器后访问它，您将能够访问它。

用类似的东西快速测试它：

 console.log($scope.userForm); // undefined

 $scope.logForm= function(){
    console.log($scope.userForm); // defined
 };

打开您的控制台并查看此 bin http://jsbin.com/loqic/1/edit?js,output

【讨论】：

【解决方案2】：

您无法访问表单，因为您试图在它存在之前进行访问。请参阅下面的代码示例，它可以帮助你。

var app = angular.module('app',[]);

app.controller('fCtrl', function($scope){
  
 $scope.setForm = function (form) {
    $scope.userForm = form;     
    $scope.users = {};
 
   console.log($scope.userForm) //empty object
   console.log($scope.userForm.$pristine); // undefined
   console.log($scope.users); //empty object
   console.log($scope.users.num); //undefined
   
}
  
  
});

<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.2.23/angular.min.js"></script>
<div ng-app="app">
  <div ng-controller="fCtrl">

    <form name="userForm" ng-submit="setUsers()">
      <input type="number" class="form-control" name="users" ng-model="users.num" required>
      <button type="submit" class="btn btn-primary" ng-disabled="userForm.$invalid">Continue</button>

      <span ng-init="setForm(userForm);"></span>
    </form>
  </div>
</div>

【讨论】：