Question

我正在Angular中动态构建表单。

一切正常，直到我达到验证指令。

这使用表单对象获取字段名称并对其应用样式以显示无效字段中的错误。

但是因为它是动态设置的，名称显示为{{field.name}}而不是浏览器中呈现的实际名称。

这是我的标记

<div class="form-group" ng-repeat="field in fields">
    <label class="text control-label col-sm-2" for="{{field.name}}">{{field.label}}</label>
    <div class="input-group col-sm-9" ng-switch="field.type">
        <input ng-switch-when="email" type="email" name="{{field.name}}"  class="form-control" id="{{field.name}}" placeholder="{{field.label}}" ng-model="field.value" required>

        <input ng-switch-when="text" type="text" name="{{field.name}}" class="form-control" id="{{field.name}}" placeholder="{{field.label}}"  ng-model="field.value" required>

        <select ng-switch-when="select" id="{{field.name}}" name="{{field.name}}" id="{{field.name}}" ui-select2="" ng-model="field.value" placeholder="{{field.label}}" required>
            <option></option>
            <option ng-repeat="option in field.options" value="{{option.value}}">{{option.label}}</option>
        </select>

        <p ng-switch-default>Need template for {{field.type}}</p>
    </div>

</div>

这是我在指令

中检查错误的地方

// go through every field
for(var errorType in form.$error)
{
    var fields = form.$error[errorType];
    // loop through all fields of this type
    for(var j = 0 ; j < fields.length ; j++)
    {
        var field = fields[j];
        console.log(field);
        var $field = element.find('[name='+field.$name+']');

        showErrors($field, field, errorType);
    }
}

以下是注销时其中一个无效字段的属性

...
$invalid: true
$isEmpty: function (value) {
$modelValue: ""
$name: "{{field.name}}"
$parsers: Array[1]
$pristine: true
...

所以，当我尝试使用var $field = element.find('[name='+field.$name+']');来抓住该字段时，它显然不起作用，我收到错误...

   unrecognized expression: [name={{field.name}}]

我如何解决此问题并获取呈现的名称。我需要这个指令来处理非动态创建的表单（在这种情况下它可以正常工作）。

Answer 1

您必须使用指令：

myApp.directive("dynamicName",function($compile){
  return {
      restrict:"A",
      terminal:true,
      priority:1000,
      link:function(scope,element,attrs){
          element.attr('name', scope.$eval(attrs.dynamicName));
          element.removeAttr("dynamic-name");
          $compile(element)(scope);
      }
   };
});

Here是一个小提琴。

完整答案here。

AngularJS以动态形式编译呈现的名称值

1 个答案: