AngularJS 动态表单字段验证

Question

我正在尝试验证从后端端点提供给我的一些表单字段...

所以基本上input 元素是在ng-repeat 内动态创建的。 所以input属性也是动态添加的，比如type、name等……

但是因为name属性是动态添加的，所以当我尝试验证它时，像这样，例如：

myForm.elName.$valid

它不返回任何内容，因为此时它不知道elName 是什么。

我创建了一个 jsFiddle 来演示这个问题： http://jsfiddle.net/peduarte/HB7LU/1889/

任何帮助或建议将不胜感激！

FANX。

编辑：
我一直在参考这个 AWESOME 文档： http://docs.angularjs.org/api/ng.directive:input.email

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

使用它：

<input dynamic-name="field.name"
       type="{{ field.type }}"
       placeholder="{{ field.name }}"
       ng-model="field.value"
       required>

DEMO

问题说明：

默认情况下，使用 ngModelController (ng-model) 的输入元素在链接到注册自身并使用输入的 name 属性 公开FormController 上的属性时调用FormController.$addControl在这种情况下是{{ field.name }}。因此，即使控件已注册，但您在 FormController 上没有公开属性，名称为 email、firstName，您也只有 {{ field.name }} 引用最后一个输入项

解决方案说明：

在此解决方案中，我创建了一个自定义指令，以在运行时将 {{ field.name }} 替换为正确的名称。

有关为什么我必须使用 terminal:true, 和 priority:1000 的更多信息，请查看此讨论：Add directives from directive in AngularJS