当前位置: 首页 > 面试题库 >

AngularJS动态表单字段验证

朱阳曜
2023-03-14
问题内容

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

因此基本上,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


问题答案:

试试我的自定义指令:

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手动表单验证,包括了AngularJS手动表单验证的使用技巧和注意事项,需要的朋友参考一下 所谓手动验证是通过AngularJS表单的属性来验证,而成为AngularJS表单必须满足两个条件: 1、给form元素加上novalidate="novalidate"; 2、给form元素加上name="theForm", 如下: ● 给form加上novalidate=

  • 本文向大家介绍AngularJS自动表单验证,包括了AngularJS自动表单验证的使用技巧和注意事项,需要的朋友参考一下 AngularJS的另外一种表单验证方式是自动验证,即通过directive来实现,除了AngularJS自带的directive,还需要用到angular-auto-validate这个第三方module。 有关angular-auto-validate: 安装:npm i

  • 本文向大家介绍AngularJS实现表单手动验证和表单自动验证,包括了AngularJS实现表单手动验证和表单自动验证的使用技巧和注意事项,需要的朋友参考一下 AngularJS的表单验证大致有两种,一种是手动验证,一种是自动验证。 一、手动验证 所谓手动验证是通过AngularJS表单的属性来验证。而成为AngularJS表单必须满足两个条件: 1、给form元素加上novalidate="no

  • 问题内容: 我的表格中有3个字段。我有一个提交按钮和一个“添加其他字段”按钮。我知道我可以使用表单类中的方法添加字段。 我是Python和Django的新手,并且陷入了一个初学者的问题;我的问题是: 当我单击“添加其他字段”按钮时,添加其他字段的过程是什么? 是否需要再次呈现表单? 我如何以及何时打电话,甚至必须打电话? 如何将参数传递给? 问题答案: 你的表单必须基于从POST传递给它的一些变量

  • 问题内容: 尝试将指令添加到具有动态ID的输入时,链接方法未正确绑定到该对象。给定以下jsfiddle或html: 和js: 我在控制台调试器上看到的是,当链接被调用时,其ID实际上显示为“ datepicker-{{{id}}””而不是“ datepicker-7”。 有办法强迫这种情况发生吗?实施此方法的更好方法? 更新 :应该已经澄清。单击日期选择器会显示出来,但是单击日期不起作用。我收到错

  • 问题内容: 我有这种形式:http : //jsfiddle.net/dfJeN/ 如您所见,输入的名称值是静态设置的: ,则表单验证可以正常工作(添加一些内容并从输入中删除所有文本,必须显示一个文本)。 然后,我尝试动态设置名称值:http : //jsfiddle.net/jNWB8/ 然后我将其应用于我的验证 (此模式将在ng-repeat中使用),但我的表单验证已损坏。它在浏览器中已正确解