AngularJS 动态表单字段验证

Posted 2023-02-22

【中文标题】AngularJS 动态表单字段验证

【英文标题】：AngularJS dynamic form field validation

【发布时间】：2014-02-22 17:00:52

【问题描述】：

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

所以基本上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

【问题讨论】：

请发展。为什么你对 angularJS 的每一秒都感到后悔？

这就是你要找的***.com/questions/27071413/…

【参考方案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

【讨论】：

可以使用独立作用域代替作用域。$eval: scope: dynamicName: '=' 在指令配置中，然后在link 中简单地使用scope.dynamicName。

@Hugo Wood：我认为我们在这里不需要隔离范围。该指令的目的是在current scope 的基础上实现modify the current element。使用当前范围更适合 IMO。

我可以动态循环错误信息吗？它们在演示中被硬编码

@sisimh：是的，只需使用 javascript 括号表示法： myForm[formFields[0].name].$valid :jsfiddle.net/3qu3tu6f

感谢您的回复@KhanhTO，实际上我正在考虑从它自己的指令中返回验证错误，在这种情况下，我如何将表单名称与错误字段连接起来，就像您所做的那样我没有硬编码“myForm”