实现效果

form表单控件的实时更新

效果如图

关键代码

validateForm: FormGroup;    // 表单校验
constructor(
private fb: FormBuilder
) {
this.validateForm = this.fb.group({ });
}
// 这里有一个控件数组,包含控件的显示名称、属性名和控件类型
this.properties=[
{nameChain:'account',controlType:0,displayName:'账号'},
{nameChain:'password',controlType:1,displayName:'密码'},
];
// 先清理之前的控件
this.validateForm.clearValidators();
this.properties.forEach(property => {
// 根据新控件数组,插入控件
this.validateForm.addControl(property.nameChain, this.fb.control(null, Validators.required));
});

前端循环properties,填充控件即可

<form nz-form [formGroup]="validateForm">
<nz-form-item *ngFor="let property of properties">
<nz-form-label [nzSm]="2" [nzXs]="2" nzRequired>{{property.displayName}}</nz-form-label>
<!--输入框-->
<nz-form-control [nzSm]="4" [nzXs]="4" *ngIf="property.controlType==0">
<input nz-input [formControlName]="property.nameChain" type="text" class="form-control" name="{{property.nameChain}}" [(ngModel)]="dataObj[property.nameChain]">
</nz-form-control>
<!--密码框-->
<nz-form-control [nzSm]="4" [nzXs]="4" *ngIf="property.controlType==1">
<input nz-input type="password" [formControlName]="property.nameChain" class="form-control" name="{{property.nameChain}}" [(ngModel)]="dataObj[property.nameChain]">
</nz-form-control>
<!--下拉框-->
<nz-form-control [nzSm]="4" [nzXs]="4" *ngIf="property.controlType==2">
<nz-select [(ngModel)]="dataObj[property.nameChain]" class="form-control" name="modules" [formControlName]="property.nameChain">
<nz-option *ngFor="let city of cities" [nzValue]="city.id" [nzLabel]="city.name">
</nz-option>
</nz-select>
</nz-form-control>
</nz-form-item>
</form>

示例代码

示例代码

参考资料

Angular2 form ControlGroup who hold an undefined number of Control

angular form set dynamic control(form动态设置control)的更多相关文章

  1. Ext.form.Label组件动态设置html值

    解决方法: (1)用的是 Ext.getCmp(id).setText('XXXX')可以动态设置label 显示的文本值,但是文本中有个别数字需要改变颜色显示,需要加样式,这种方法会把加样式的标签( ...

  2. Dynamic CRM 2013学习笔记(二十八)用JS动态设置字段的change事件、必填、禁用以及可见

    我们知道通过界面设置字段的change事件,是否是必填,是否可见非常容易.但有时我们需要动态地根据某些条件来设置,这时有需要通过js来动态地控制了. 下面分别介绍如何用js来动态设置.   一.动态设 ...

  3. easyui表单多重验证,动态设置easyui控件

    要实现的功能:在做添加学生信息的时候,利用easyui的验证功能判断 学号是否重复和学号只能为数字 最终效果如下图: 但在做这个的过程中,遇到了一系列的问题: 扩展validatebox的验证方法,最 ...

  4. JavaScript DOM编程基础精华03(动态设置,层的操作,性能问题)

    代码是否需要放置到onload中  //如果js代码需要操作页面上的元素,则将该代码放到onload里面.         //因为当页面加载完毕之后页面上才会有相关的元素 //如果js代码中没有操作 ...

  5. js动态设置输入框字体/颜色

    动态设置文本框颜色: 主要是利用javascript中的触发事件onfocus和onblur <script language="javascript" type=" ...

  6. 【ABAP系列】SAP ABAP OOALV 动态设置单元格可否编辑

    公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP OOALV 动 ...

  7. Azure SQL Database (23) Azure SQL Database Dynamic Data Masking动态数据掩码

    <Windows Azure Platform 系列文章目录> 我们在使用关系型数据的时候,有时候希望: - 管理员admin,可以查看到所有的数据 - 普通用户,某些敏感字段,比如信用卡 ...

  8. C#动态设置匿名类型对象的属性

    用C#写WPF程序, 实现功能的过程中碰到一个需求: 动态设置对象的属性,属性名称是未知的,在运行时才能确定. 本来这种需求可以用 Dictionary<string, object> 实 ...

  9. model.form使用,配合form的钩子

    一次model.form的使用记录,配合form钩子的过程 在写信息采集功能的时候,需要添加资产信息,使用modelform组件减少工作量 官网介绍:版本1.9.https://docs.django ...

随机推荐

  1. Django之分页显示文章

    1.项目:http://www.cnblogs.com/jasonhaven/p/7493422.html 2.任务描述:页面分页显示文章 3.源代码 后台: from django.core.pag ...

  2. Android 动态改变高度以及计算长度的EditText

    前段时间项目需求,需要做一个有限制长度的输入框并动态显示剩余文字,同时也要动态改变EditText的高度来增加用户体验.现整理出来与大家分享. 先来看看效果图 看了效果就分享一下布局 <Rela ...

  3. 【漏洞公告】Tomcat信息泄漏和远程代码执行漏洞:CVE-2017-12615/CVE-2017-12616

    2017年9月19日,Apache Tomcat官方确认并修复了两个高危漏洞,漏洞CVE编号:CVE-2017-12615和CVE-2017-12616,该漏洞受影响版本为7.0-7.80之间,在一定 ...

  4. AE中网络分析的实现 的各个类之间的关系

    原文AE中网络分析的实现 的各个类之间的关系 1.     创建网络数据集 在ArcCatalog中勾选网络分析模块,新建个人地理信息数据库—>新建要素数据集—>批量导入要素—>创建 ...

  5. [React Native] Writing Platform-Specific Components for iOS and Android in React Native

    Learn to write components that render differently on iOS and Android, but present the same API. Firs ...

  6. show binlog events 命令查看某个binlog日志内容

    mysql> show binlog events [IN 'log_name'] [FROM pos] [LIMIT [offset,] row_count];   选项解析:   IN 'l ...

  7. BFKit:对常用 UIButton,UIColor,UIDevice,UIFont ,UIImage 等开发类进行了扩展

    BFKit对常用于开发的类进行了扩展,整合了多个常用的控件和开发所需要的功能,是一个通用性的类库.集成后可以帮助更快的App开发.有兴趣的同学可以看看哦. http://code4app.com/io ...

  8. 【CTO俱乐部研修班开课】看板先驱David J. Anderson:看板核心在于创造一种能力——提升敏捷性

    看板开发方法是近年来最热门的敏捷和精益开发方法.看板之父David J. Anderson觉得其核心在于帮助企业创造一种能力--提升敏捷性.CTO俱乐部看板研修班将通过理论.沙盘模拟.真实案例分享等阐 ...

  9. Asp.net压缩网站中的文件

    为了说明自定义虚拟路径,这里弄个示例,仅仅用一个压缩包存放一个网站的多个文件. 这个东西是要需要通过实现3个抽象类来实现: System.Web.Hosting.VirtualPathProvider ...

  10. Linux下用GCC

    Linux下用GCC 前言 离职前对做过的支付系统进行了一番#总结,继续完善我的C服务器. 本想着接下来大概实现一下 CGI 协议,但是实现过程中被一个问题卡住了: C进程与php进程的交互数据类型问 ...