简单的AngularJS表单在Scope中未定义

Question

我开始在jsfiddle中使用AngularJS表单,我遇到了一个问题,一个非常简单的表单示例没有按预期工作.我所拥有的只是一个命名形式,由于某种原因它没有出现在范围内(我期待一个FormController实例).

我有一个小提琴设置,下面是基本代码:

HTML

<div id="mainContainer" ng-app="angularTest" ng-controller="MainCtrl">
    <h1>The Form</h1>
    <form name="theForm">
        <input name="myName" type="text" ng-model="model.name" />
        <input name="submit" type="submit" />
    </form>
</div>

JS

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

app.controller('MainCtrl', ['$scope', function($scope) {
    $scope.model = { name: 'Model Name' };
    console.log($scope.theForm); //displays 'undefined'
}]);

我在jsfiddle上找不到很多直截了当的例子,所以我不确定这是否与它这样的网站有一些奇怪的交互(我找到的大部分例子都没有使用正式的控制器).我也尝试过Plunker来检查,但我遇到了同样的问题.

我确定我错过了一些非常明显的东西,但我看不到很多其他的东西需要改变或调整.任何帮助是极大的赞赏!

Answer 1

不使用watch(这有点矫枉过正)而执行此操作的好方法是在注册表单的范围内定义一个对象.

HTML

<div id="mainContainer" ng-app="angularTest" ng-controller="MainCtrl">
    <h1>The Form</h1>
    <form name="form.theForm">
        <input name="myName" type="text" ng-model="model.name" />
        <input type="button" value="Here the scope" ng-click="display()"/>
        <input name="submit" type="submit" />
    </form>
</div>

JS

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

app.controller('MainCtrl', ['$scope', function($scope) {
    $scope.model = { name: 'Model Name' };
    $scope.form = {};
    $scope.display = function () {
        console.log($scope.form.theForm);
    }
}]);

Answer 2

控制器最初运行后,表单仅$scope在控制器中注册自身.因此,即使一切设置正确,也将返回undefined.console.log($scope.theForm)

在您的示例中,为了对其进行响应theForm,您可以设置观察程序theForm以根据其存在来设置调试文本:

$scope.$watch('theForm', function(theForm) {
    if(theForm) { 
        $scope.formDebugText = 'Form in Scope';
    }
    else {
        $scope.formDebugText = 'Form is Undefined';
    }        
});

这可以在http://jsfiddle.net/9k2Jk/1/上看到

Answer 3

修复它对我来说是使用父对象$scope.

在控制器中:

$scope.forms = {};
$scope.registerUser = function registerUser() {
    if ($scope.forms.userForm.$valid) {
        alert('submit');
    }
};

在模板中:

<form name="forms.userForm" ng-submit="registerUser()">

原因:

如果使用<form name="userForm"...而不是<form name="forms.userForm"...将表单附加到子作用域,但因为$ scopes使用原型继承,所以只要在原始$ scope上声明了一个空对象文字,表单就会附加到它上面.

Answer 4

这是访问表单变量的推荐方法:https: //docs.angularjs.org/guide/forms - 绑定到表单和控件状态

在HTML中:

<form name="form">  
<input type="button" ng-click="reset(form)" value="Reset" />
</form>

Youl会将表单的名称作为变量传递给函数.

在JS中:

$scope.reset = function(form) { 
  alert(form); 
};

现在不应该定义变量'形式'.