AngularJS:域动态添加不上的FormController注册(AngularJS: Fiel

2019-08-19 23:40发布

我在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,并将其发布到范围(下窗体名称)。 这意味着我有机会获得像以下特性:

$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此刻很短的到来。 角的形式验证不使用动态命名下地干活。 您可以在HTML的底部添加以下,看看究竟发生了什么:

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

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

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

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


Answer 2:

我遇到了类似的问题,我和我的所作所为来解决它放入字段的名称调用$汇编模板之前。 一个简单的做与string.replace的伎俩。 话又说回来,这是唯一可能的,因为我是越来越领域模板通过HTTP,并已获得模板文本。

更新:这里是一个小黑客小提琴,使您的工作例

app.directive('field', function($compile) {
    var linker= function(scope, element){

    var template = '<input type="text" name="{{fname}}" ng-model="model">'
    .replace('{{fname}}', scope.fname);
        element.html(template)
        $compile(element.contents())(scope)
    }
  return {
    restrict: 'E',
    scope: {
      fname: '=',
      model: '='
    },

    replace: true,
      link: linker
  };
});

http://jsfiddle.net/2Ljgfsg9/4/



文章来源: AngularJS: Fields added dynamically are not registered on FormController