AngularJS：域动态添加不上的FormController注册 [英] AngularJS: Fields added dynamically are not registered on FormController

问题描述

我有以下的静态形式AngularJS：

I have the following static form in 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>

角创建我的FormController并将其发布到范围（下窗体名称）。这意味着我有一个像下面的访问属性：

Angular creates a FormController for me and publishes it into the scope (under the form name). Which means I have access to properties like the following:

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

这是超级有用！

但在我的情况下，我建立一个形式的动态后，使用指令：

But in my case I'm building a form dynamically, using directives:

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

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

</form>

的＆LT;场＆GT; 指令不解决实际＆LT;输入＆GT; 元素，直到过了一段时间（我已经从服务器获取一些数据后，链接的指令，等等）。

The <field> directives don't resolve to actual <input> elements until after a while (after I've fetched some data from the server, linked the directives, etc.).

这里的问题是，没有字段属性表单控制器上定义，好象动态字段不与的FormController注册

The problem here is that no field properties are defined on the form controller, as if dynamic fields didn't register with the FormController:

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

任何想法，为什么？任何解决方案/解决方法吗？

Any idea why? Any solution/workaround?

您可以看到整个code在这的jsfiddle：结果
http://jsfiddle.net/vincedo/3wcYV/

You can see the entire code in this jsFiddle:
http://jsfiddle.net/vincedo/3wcYV/

推荐答案

更新2015年7月31日已修正1.3以来，在这里看到：的 https://github.com/angular/angular.js/issues/1404#issuecomment-125805732

Update 7/31/2015 This has been fixed since 1.3, see here: https://github.com/angular/angular.js/issues/1404#issuecomment-125805732

原来的答案
这是不幸的是AngularJS此刻很短的到来。角的表单验证不与动态命名字段。您可以在HTML的底部添加以下，看看究竟发生了什么：

Original Answer This is unfortunately a short coming of AngularJS at the moment. Angular's form validation doesn't work with dynamically named fields. You can add the following at the bottom of your HTML to see exactly what's going on:

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

正如你所看到的，角度是没有得到动态输入姓名权。公司目前旗下有周围的工作涉及嵌套形式，可以得到一种讨厌的，但它确实工作，（有一些额外的工作）将提交父窗体没有麻烦。

As you can see, Angular isn't getting the dynamic input name right. There's currently a work around involving nested forms that can get kind of nasty, but it does work and (with a little extra work) will submit the parent form without trouble.

如果你愿意，你可以去鼓起来的问题，更多的支持： GitHub的问题 - 动态元素验证。无论哪种方式，这里的code：

If you want, you can go drum up more support for the issue: GitHub Issue - dynamic element validation. Either way, here's the code:

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的：

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);
}

这篇关于AngularJS：域动态添加不上的FormController注册的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！