Angular JS 绑定到控制器内的表单答案

【问题标题】：Angular JS Binding to Form Within a ControllerAngular JS 绑定到控制器内的表单
【发布时间】：2014-06-14 21:08:30
【问题描述】：

我有一个这样初始化的表单--

<div class="col-xs-12 col-md-8" ng-controller="myController">
                <form name="userForm" class="form-horizontal"  role="form" novalidate>
                    <div class="form-group">
                        <label for="inputb" class="col-xs-3 col-sm-3 control-label">Beam Width</label>
                        <div class="col-xs-6 col-sm-5">
                            <input type="text" class="form-control" name="inputb" placeholder="Input width in mm" ng-model="user.inputb" required>
                        </div>
                    </div>
                </form>
</div>

理想情况下，我应该能够像这样从控制器内部访问表单 ---

angular.module("myApp",[])
    .controller("myController",function($http,$scope){
        //user is bound to the form inputs
        var i = $scope.userForm.inputb.$pristine;
        console.log(i); //expected to be true or false
        console.log($scope.userForm);
            console.log(userForm);

但第一个控制台输出给出消息 - 无法访问未定义的属性 M 第二个控制台输出给出了明显的消息“未定义” 有趣的是，第三个控制台输出确实给出了 userForm 对象！这里发生了什么，为什么我无法按预期在控制器中按名称访问表单元素？为什么删除 $scope 会打印对象？这并不能解决问题，因为只是 userForm.M.$pristine 再次“未定义”。

附：我正在调试我在控制器中需要它的东西。具体来说，这在视图中也不起作用，如果未输入 inputb，我想在其中显示错误消息。

【问题讨论】：

请制作一个小提琴。
这与这个 SO 问题中解释的问题相同：[Form elements not appearing in $scope][1] [1]: stackoverflow.com/a/18657394/645428

标签： angularjs angularjs-scope

【解决方案1】：

好吧，看来表单还没有初始化。正如您在this plunker 中看到的，在超时时一切正常。但据我所知， $scope.userForm 不打算以这种方式使用（在控制器初始化上）。可以使用：

在模板中以声明方式描述类，或禁用提交按钮等。在表达式中使用它永远不会产生异常。
提交时。它肯定会在那一刻被初始化

【讨论】：