AngularJS：动态添加的字段未在FormController上注册

Question

我在AngularJS中具有以下 静态 形式：

<form name="myForm" class="form-horizontal">

  <label>First Name:</label>
  <input type="text" name="first_name" ng-model="entity.first_name">

  <label>Last Name:</label>
  <input type="text" name="last_name" ng-model="entity.last_name">

</form>

Angular为我创建了一个FormController并将其发布到范围内（在表单名称下）。这意味着我可以访问以下属性：

$scope.myForm.first_name.$error
$scope.myForm.last_name.$invalid
...

这超级有用！

但就我而言，我正在使用指令 动态 构建表单：

<form name="myForm" class="form-horizontal">

  <field which="first_name"></field>
  <field which="last_name"></field>

</form>

该<field>指令不解决实际<input>元素，直到一段时间后（我已经从服务器获得的一些数据，链接的指令等）。

这里的问题是在表单控制器上没有定义任何字段属性，就像动态字段未向FormController注册一样：

// The following properties are UNDEFINED (but $scope.myForm exists)
$scope.myForm.first_name
$scope.myForm.last_name

知道为什么吗？任何解决方案/解决方法？

您可以在此jsFiddle中查看整个代码：http :
//jsfiddle.net/vincedo/3wcYV/

Answer 1

2015年7月31日更新
自1.3起已修复，请参见此处：https
:
//github.com/angular/angular.js/issues/1404#issuecomment-125805732

原始答案
不幸的是，目前这是AngularJS的不足。Angular的表单验证不适用于动态命名的字段。您可以在HTML的底部添加以下内容，以查看发生了什么事：

<pre>{{myForm|json}}</pre>

如您所见，Angular没有正确输入动态输入名称。当前有一种涉及嵌套表单的工作，这种嵌套表单可能有点讨厌，但是它确实可以工作，并且（只需做一些额外的工作）就可以毫无困难地提交父表单。

如果需要，您可以为该问题提供更多支持：GitHub Issue-
动态元素验证。无论哪种方式，下面都是代码：

http://jsfiddle.net/langdonx/6H8Xx/2/

HTML：

<div data-ng-app>
    <div data-ng-controller="MyController">
        <form id="my_form" name="my_form" action="/echo/jsonp/" method="get">
            <div data-ng-repeat="field in form.data.fields">
                <ng-form name="form">
                    <label for="{{ field.name }}">{{ field.label }}:</label>
                    <input type="text" id="{{ field.name }}" name="{{field.name}}" data-ng-model="field.data" required>
                    <div class="validation_error" data-ng-show="form['\{\{field.name\}\}'].$error.required">Can't be empty.</div>

                </ng-form>
            </div>
            <input type="submit" />
        </form>
    </div>
</div>

JavaScript：

MyController.$inject = ["$scope"];

function MyController($scope) {
    $scope.form = {};
    $scope.form.data = {};
    $scope.form.data.fields = []

    var f1 = {
        "name": "input_1",
        "label": "My Label 1",
        "data": ""
    };
    var f2 = {
        "name": "input_2",
        "label": "My Label 2",
        "data": ""
    };

    $scope.form.data.fields.push(f1);
    $scope.form.data.fields.push(f2);
}