AngularJS动态表单字段验证

时间:2014-01-30 11:49:31

标签: javascript angularjs

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

所以基本上input元素是在ng-repeat内动态创建的。 因此,input属性也会动态添加,例如typename等......

但是因为name属性是动态添加的,所以当我尝试验证它时,例如:

myForm.elName.$valid

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

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

非常感谢任何帮助或建议!

FANX。

修改
我一直在提到这个AWESOME文档: http://docs.angularjs.org/api/ng.directive:input.email

1 个答案:

答案 0 :(得分:36)

尝试我的自定义指令:

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)在链接到自身时调用FormController.$addControl并在FormController上使用 name属性公开属性输入,在这种情况下为{{ field.name }}。因此,即使已注册该控件但您没有在名为FormController email的{​​{1}}上公开属性,也只有firstName引用最后一个输入项

解决方案说明:

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

有关我必须使用{{ field.name }}terminal:true,的详细信息,请查看此讨论:Add directives from directive in AngularJS