AngularJS 动态表单字段验证

IT技术 javascript angularjs
2021-03-15 09:23:52

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

所以基本上input元素是在一个ng-repeat. 因此,input属性也被动态添加,如typename等...

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

myForm.elName.$valid

它不返回任何东西,因为此时它不知道是什么elName

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

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

范克斯。

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

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>

演示

问题说明:

默认情况下,输入元件使用ngModelController( ng-model调用FormController.$addControl时它们与注册其自身,并在暴露的属性FormController输入的名称属性{{ field.name }}在这种情况下。因此,即使控制已注册,但你没有暴露在性能FormController与命名的emailfirstName你只需要{{ field.name }}引用的最后一个输入项

解决方案说明:

在这个解决方案中,我创建了一个自定义指令来{{ field.name }}在运行时用正确的名称替换

有关为什么我必须使用terminal:true,and 的更多信息priority:1000,请查看此讨论:在 AngularJS 中从指令添加指令

@sisimh:是的,只需使用 javascript 括号表示法{{ myForm[formFields[0].name].$valid }}::jsfiddle.net/3qu3tu6f
2021-04-16 09:23:52
可以scope: { dynamicName: '=' }在指令配置中使用隔离作用域代替 scope.$eval: ,然后scope.dynamicNamelink.
2021-04-17 09:23:52
谢谢你的回复@KhanhTO,实际上我正在考虑从它自己的指令返回验证错误,在这种情况下,我如何将表单名称与错误字段连接起来,就像你所做的那样,除了我没有“myForm”硬编码
2021-04-18 09:23:52
我可以动态循环错误消息吗?它们在演示中被硬编码
2021-04-26 09:23:52
@Hugo Wood:我认为我们不需要在这里隔离范围。该指令的目的是modify the current element基于current scope. 使用当前范围是更合适的 IMO。
2021-05-13 09:23:52