javascript AngularJS 动态表单字段验证
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/21455695/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
AngularJS dynamic form field validation
提问by peduarte
I am trying to validate some form fields which are given to me from a backend endpoint...
我正在尝试验证从后端端点提供给我的一些表单字段...
So basically the inputelements are dynamically created inside a ng-repeat.
Therefore, the inputattributes are also dynamically added, such as the type, name, etc...
所以基本上input元素是在一个ng-repeat. 因此，input属性也被动态添加，如type，name等...
However because the nameattribute is dynamically added, when I try to validate it, like this, for example:
但是因为name属性是动态添加的，所以当我尝试验证它时，就像这样，例如：
myForm.elName.$valid
It doesn't return anything because at this point, it doesn't know what elNameis.
它不返回任何东西，因为此时它不知道是什么elName。
I created a jsFiddle to demonstrate the problem: http://jsfiddle.net/peduarte/HB7LU/1889/
我创建了一个 jsFiddle 来演示这个问题：http: //jsfiddle.net/peduarte/HB7LU/1889/
Any help or advice will be much appreciated!
任何帮助或建议将不胜感激！
FANX.
范克斯。
EDIT:
I've been referring to this AWESOME documentation:
http://docs.angularjs.org/api/ng.directive:input.email
编辑：
我一直在参考这个很棒的文档：http://docs.angularjs.org/api/ng.directive:
input.email
回答by Khanh TO
Try my custom directive:
试试我的自定义指令：
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);
}
};
});
Use it:
用它：
<input dynamic-name="field.name"
type="{{ field.type }}"
placeholder="{{ field.name }}"
ng-model="field.value"
required>
Explanation of the problem:
问题说明：
By default, input elements using ngModelController (ng-model) call FormController.$addControlwhen they are linked to register itself and expose a property on the FormControllerwith the name property of the inputwhich is {{ field.name }}in this case. Therefore, even though the control is registered but you don't have exposed properties on FormControllerwith named email, firstName, you only have {{ field.name }}referencing the last input item
默认情况下，输入元件使用ngModelController（ ng-model）调用FormController.$addControl时它们与注册其自身，并在暴露的属性FormController与输入的名称属性是{{ field.name }}在这种情况下。因此，即使控制已注册，但你没有暴露在性能FormController与命名的email，firstName你只需要{{ field.name }}引用的最后一个输入项
Explanation of the solution:
解决方案说明：
In this solution, I created a custom directive to replace the {{ field.name }}with the correct name at runtime.
在这个解决方案中，我创建了一个自定义指令来{{ field.name }}在运行时用正确的名称替换。
For more information why I have to use terminal:true,and priority:1000, check out this discussion: Add directives from directive in AngularJS
有关为什么我必须使用terminal:true,and 的更多信息priority:1000，请查看此讨论：在 AngularJS 中从指令添加指令
