@angular/cli项目构建--Dynamic.Form(2)
form-item-control.service.ts update
@Injectable()
export class FormItemControlService {
constructor(private formBuilder: FormBuilder) {
} toFormGroup(formItems: FormItemBase<any>[]) {
const group: any = {};
formItems.forEach(formItem => {
group[formItem.key] = formItem.required
? [formItem.value || '', Validators.required]
: [formItem.value || ''];
});
return this.formBuilder.group(group);
}
}
dynamic-form.component update
<div [formGroup]="form">
<label [attr.for]="formItem.key">{{formItem.label}}</label>
<div [ngSwitch]="formItem.controlType"> <input *ngSwitchCase="'textBox'" [formControlName]="formItem.key"
[id]="formItem.key" [type]="formItem.type" maxlength="{{formItem.maxLength}}"> <select [id]="formItem.key" *ngSwitchCase="'dropDown'" [formControlName]="formItem.key">
<option *ngFor="let opt of formItem.options" [value]="opt.key">{{opt.value}}</option>
</select> <div *ngFor="let opt of formItem.radioOptions">
<input *ngSwitchCase="'radio'" [formControlName]="formItem.key"
[id]="opt.key" type="radio" [value]="opt.key">
<label [attr.for]="opt.key">{{opt.value}}</label>
</div> <div *ngFor="let opt of formItem.checkOptions">
<input *ngSwitchCase="'checkbox'" [formControlName]="formItem.key"
[id]="opt.key" type="checkbox" [value]="opt.key">
<label [attr.for]="opt.key">{{opt.value}}</label>
</div> </div> <!--<div class="errorMessage" *ngIf="!isValid && form.get(formItem.key).touched">{{formItem.label}} is required</div>-->
<div class="errorMessage"
*ngIf="form.get(formItem.key).hasError('required') && form.get(formItem.key).touched">
{{formItem.label}} is required
</div>
</div>
@angular/cli项目构建--Dynamic.Form(2)的更多相关文章
- @angular/cli项目构建--Dynamic.Form
导入所需模块: ReactiveFormsModule DynamicFormComponent.html <div [formGroup]="form"> <l ...
- @angular/cli项目构建--组件
环境:nodeJS,git,angular/cli npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm instal ...
- @angular/cli项目构建--modal
环境准备: cnpm install ngx-bootstrap-modal --save-dev impoerts: [BootstrapModalModule.forRoot({container ...
- @angular/cli项目构建--路由2
app.module.ts update const routes: Routes = [ {path: '', redirectTo: '/home', pathMatch: 'full'}, {p ...
- @angular/cli项目构建--路由1
app.module.ts import {BrowserModule} from '@angular/platform-browser'; import {NgModule} from '@angu ...
- @angular/cli项目构建--animations
使用方法一(文件形式定义): animations.ts import { animate, AnimationEntryMetadata, state, style, transition, tri ...
- @angular/cli项目构建--interceptor
JWTInterceptor import {Injectable} from '@angular/core'; import {HttpEvent, HttpHandler, HttpInterce ...
- @angular/cli项目构建--路由3
路由定位: modifyUser(user) { this.router.navigate(['/auction/users', user.id]); } 路由定义: {path: 'users/:i ...
- @angular/cli项目构建--httpClient
app.module.ts update imports: [ HttpClientModule] product.component.ts import {Component, OnInit} fr ...
随机推荐
- 设置linux下shell显示不同颜色的字体
实例代码如下: #!/bin/bash clear echo -e "\033[1m Hello World" # bold effect echo -e "\033[5 ...
- JAVA使用DES加密解密
在使用DES加密解密的时候,遇到了一些问题,廖记一下.如有哪位大神亲临留言指点,不胜感激. 先上代码: public DESUtil() { } //密码,长度要是8的倍数 注意此处为简单密码 简单应 ...
- OpenGL学习进程(4)第二课:绘制图形
本节是OpenGL学习的第二个课时,下面介绍如何用点和线来绘制图形: (1)用点的坐标来绘制矩形: #include <GL/glut.h> void display(void) ...
- HTTP学习笔记02-HTTP报文格式之概述
HTTP学习笔记02-HTTP报文格式之概述 HTTP学习笔记02-HTTP报文格式之概述 HTTP报文格式 报文的语法 起始行 首部 实体部分 学习一个协议感觉最有意思的就是看包结构…在我看来这是唯 ...
- imx6solo wm8960始终没有声音输出
我尝试各种办法,wm8960始终不能得到声音输出.调试过程如下: 首先,打开电源使能脚: ret=gpio_request(SABRESD_CODEC_PWR_EN,"audio_pwr_e ...
- HAproxy 源码包安装
HAproxy 源码包安装 系统环境:Centos 7 x64位 服务版本:haproxy-1.7.8.tar.gz 编译工具:gcc 下载地址 HAproxy:https://pan.baidu.c ...
- js常用方法汇总
产生在m.n之间的随机整数 //Math.round()把数四舍五入为最接近的整数. function random(m, n) { return Math.round(Math.random() * ...
- numpy模块之创建矩阵、矩阵运算
本文参考给妹子讲python https://zhuanlan.zhihu.com/p/34673397 NumPy是Numerical Python的简写,是高性能科学计算和数据分析的基础包,他是 ...
- Vue.js学习笔记 第七篇 表单控件绑定
本篇主要说明表单控件的数据绑定,这次没有新的知识点 文本框 1.普通文本框 <div id="app-1"> <p><input v-model=&q ...
- Vue.js学习笔记 第五篇 事件处理
监听事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...