angular form set dynamic control(form动态设置control)
实现效果
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)的更多相关文章
- Ext.form.Label组件动态设置html值
解决方法: (1)用的是 Ext.getCmp(id).setText('XXXX')可以动态设置label 显示的文本值,但是文本中有个别数字需要改变颜色显示,需要加样式,这种方法会把加样式的标签( ...
- Dynamic CRM 2013学习笔记(二十八)用JS动态设置字段的change事件、必填、禁用以及可见
我们知道通过界面设置字段的change事件,是否是必填,是否可见非常容易.但有时我们需要动态地根据某些条件来设置,这时有需要通过js来动态地控制了. 下面分别介绍如何用js来动态设置. 一.动态设 ...
- easyui表单多重验证,动态设置easyui控件
要实现的功能:在做添加学生信息的时候,利用easyui的验证功能判断 学号是否重复和学号只能为数字 最终效果如下图: 但在做这个的过程中,遇到了一系列的问题: 扩展validatebox的验证方法,最 ...
- JavaScript DOM编程基础精华03(动态设置,层的操作,性能问题)
代码是否需要放置到onload中 //如果js代码需要操作页面上的元素,则将该代码放到onload里面. //因为当页面加载完毕之后页面上才会有相关的元素 //如果js代码中没有操作 ...
- js动态设置输入框字体/颜色
动态设置文本框颜色: 主要是利用javascript中的触发事件onfocus和onblur <script language="javascript" type=" ...
- 【ABAP系列】SAP ABAP OOALV 动态设置单元格可否编辑
公众号:SAP Technical 本文作者:matinal 原文出处:http://www.cnblogs.com/SAPmatinal/ 原文链接:[ABAP系列]SAP ABAP OOALV 动 ...
- Azure SQL Database (23) Azure SQL Database Dynamic Data Masking动态数据掩码
<Windows Azure Platform 系列文章目录> 我们在使用关系型数据的时候,有时候希望: - 管理员admin,可以查看到所有的数据 - 普通用户,某些敏感字段,比如信用卡 ...
- C#动态设置匿名类型对象的属性
用C#写WPF程序, 实现功能的过程中碰到一个需求: 动态设置对象的属性,属性名称是未知的,在运行时才能确定. 本来这种需求可以用 Dictionary<string, object> 实 ...
- model.form使用,配合form的钩子
一次model.form的使用记录,配合form钩子的过程 在写信息采集功能的时候,需要添加资产信息,使用modelform组件减少工作量 官网介绍:版本1.9.https://docs.django ...
随机推荐
- Django之分页显示文章
1.项目:http://www.cnblogs.com/jasonhaven/p/7493422.html 2.任务描述:页面分页显示文章 3.源代码 后台: from django.core.pag ...
- Android 动态改变高度以及计算长度的EditText
前段时间项目需求,需要做一个有限制长度的输入框并动态显示剩余文字,同时也要动态改变EditText的高度来增加用户体验.现整理出来与大家分享. 先来看看效果图 看了效果就分享一下布局 <Rela ...
- 【漏洞公告】Tomcat信息泄漏和远程代码执行漏洞:CVE-2017-12615/CVE-2017-12616
2017年9月19日,Apache Tomcat官方确认并修复了两个高危漏洞,漏洞CVE编号:CVE-2017-12615和CVE-2017-12616,该漏洞受影响版本为7.0-7.80之间,在一定 ...
- AE中网络分析的实现 的各个类之间的关系
原文AE中网络分析的实现 的各个类之间的关系 1. 创建网络数据集 在ArcCatalog中勾选网络分析模块,新建个人地理信息数据库—>新建要素数据集—>批量导入要素—>创建 ...
- [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 ...
- show binlog events 命令查看某个binlog日志内容
mysql> show binlog events [IN 'log_name'] [FROM pos] [LIMIT [offset,] row_count]; 选项解析: IN 'l ...
- BFKit:对常用 UIButton,UIColor,UIDevice,UIFont ,UIImage 等开发类进行了扩展
BFKit对常用于开发的类进行了扩展,整合了多个常用的控件和开发所需要的功能,是一个通用性的类库.集成后可以帮助更快的App开发.有兴趣的同学可以看看哦. http://code4app.com/io ...
- 【CTO俱乐部研修班开课】看板先驱David J. Anderson:看板核心在于创造一种能力——提升敏捷性
看板开发方法是近年来最热门的敏捷和精益开发方法.看板之父David J. Anderson觉得其核心在于帮助企业创造一种能力--提升敏捷性.CTO俱乐部看板研修班将通过理论.沙盘模拟.真实案例分享等阐 ...
- Asp.net压缩网站中的文件
为了说明自定义虚拟路径,这里弄个示例,仅仅用一个压缩包存放一个网站的多个文件. 这个东西是要需要通过实现3个抽象类来实现: System.Web.Hosting.VirtualPathProvider ...
- Linux下用GCC
Linux下用GCC 前言 离职前对做过的支付系统进行了一番#总结,继续完善我的C服务器. 本想着接下来大概实现一下 CGI 协议,但是实现过程中被一个问题卡住了: C进程与php进程的交互数据类型问 ...