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)的更多相关文章

  1. @angular/cli项目构建--Dynamic.Form

    导入所需模块: ReactiveFormsModule DynamicFormComponent.html <div [formGroup]="form"> <l ...

  2. @angular/cli项目构建--组件

    环境:nodeJS,git,angular/cli npm install -g cnpm --registry=https://registry.npm.taobao.org cnpm instal ...

  3. @angular/cli项目构建--modal

    环境准备: cnpm install ngx-bootstrap-modal --save-dev impoerts: [BootstrapModalModule.forRoot({container ...

  4. @angular/cli项目构建--路由2

    app.module.ts update const routes: Routes = [ {path: '', redirectTo: '/home', pathMatch: 'full'}, {p ...

  5. @angular/cli项目构建--路由1

    app.module.ts import {BrowserModule} from '@angular/platform-browser'; import {NgModule} from '@angu ...

  6. @angular/cli项目构建--animations

    使用方法一(文件形式定义): animations.ts import { animate, AnimationEntryMetadata, state, style, transition, tri ...

  7. @angular/cli项目构建--interceptor

    JWTInterceptor import {Injectable} from '@angular/core'; import {HttpEvent, HttpHandler, HttpInterce ...

  8. @angular/cli项目构建--路由3

    路由定位: modifyUser(user) { this.router.navigate(['/auction/users', user.id]); } 路由定义: {path: 'users/:i ...

  9. @angular/cli项目构建--httpClient

    app.module.ts update imports: [ HttpClientModule] product.component.ts import {Component, OnInit} fr ...

随机推荐

  1. 设置linux下shell显示不同颜色的字体

    实例代码如下: #!/bin/bash clear echo -e "\033[1m Hello World" # bold effect echo -e "\033[5 ...

  2. JAVA使用DES加密解密

    在使用DES加密解密的时候,遇到了一些问题,廖记一下.如有哪位大神亲临留言指点,不胜感激. 先上代码: public DESUtil() { } //密码,长度要是8的倍数 注意此处为简单密码 简单应 ...

  3. OpenGL学习进程(4)第二课:绘制图形

    本节是OpenGL学习的第二个课时,下面介绍如何用点和线来绘制图形:     (1)用点的坐标来绘制矩形: #include <GL/glut.h> void display(void) ...

  4. HTTP学习笔记02-HTTP报文格式之概述

    HTTP学习笔记02-HTTP报文格式之概述 HTTP学习笔记02-HTTP报文格式之概述 HTTP报文格式 报文的语法 起始行 首部 实体部分 学习一个协议感觉最有意思的就是看包结构…在我看来这是唯 ...

  5. imx6solo wm8960始终没有声音输出

    我尝试各种办法,wm8960始终不能得到声音输出.调试过程如下: 首先,打开电源使能脚: ret=gpio_request(SABRESD_CODEC_PWR_EN,"audio_pwr_e ...

  6. HAproxy 源码包安装

    HAproxy 源码包安装 系统环境:Centos 7 x64位 服务版本:haproxy-1.7.8.tar.gz 编译工具:gcc 下载地址 HAproxy:https://pan.baidu.c ...

  7. js常用方法汇总

    产生在m.n之间的随机整数 //Math.round()把数四舍五入为最接近的整数. function random(m, n) { return Math.round(Math.random() * ...

  8. numpy模块之创建矩阵、矩阵运算

    本文参考给妹子讲python  https://zhuanlan.zhihu.com/p/34673397 NumPy是Numerical Python的简写,是高性能科学计算和数据分析的基础包,他是 ...

  9. Vue.js学习笔记 第七篇 表单控件绑定

    本篇主要说明表单控件的数据绑定,这次没有新的知识点 文本框 1.普通文本框 <div id="app-1"> <p><input v-model=&q ...

  10. Vue.js学习笔记 第五篇 事件处理

    监听事件 <!DOCTYPE html> <html> <head> <meta charset="utf-8"> <titl ...