Angular动态表单使用

使用动态表单目的就是不用去手动编写太多的HTML代码，设置好之后就由数据的多少以及类型来动态生成表单，提高效率。在Angular的官网中介绍动态表单时，夹杂了一些业务方面的东西，增加了不熟悉的人学习的难度，这里直接就是为了演示怎么产生和使用动态表单。
使用动态表单时，有可能需要input类型、textarea类型或者其他表单类型等，在拿到数据构建相关控件时，需要制定一些基本的东西，比如控件类型、值等。

首先创建一个基类，这个看自己的需要，要不要基类都是自己选择，这里直接拿官网的一些配置

//基类
export class BaseControl<T>{
value: T;
key: string;
label: string;
required: boolean;
order: number;
controlType: string;
placeholder: string;

constructor(options: {
value?: T,
key?: string,
label?: string,
required?: boolean,
order?: number,
controlType?: string,
placeholder?: string
} = {}) {
this.value = options.value;
this.key = options.key || '';
this.label = options.label || '';
this.required = !!options.required;
this.order = options.order === undefined ? 1 : options.order;
this.controlType = options.controlType || '';
this.placeholder = options.placeholder || '';
}
}

创建子控件类

//textarea类
export class TextArea extends BaseControl<string>{
controlType = "textarea";
rows: number;
constructor(options: {} = {}) {
super(options);
this.rows = options['rows'] || 1;
}
}

//input类，默认文本类型
export class TextBox extends BaseControl<string>{
controlType = "textbox";
type: string;
constructor(options: {} = {}) {
super(options);
this.type = options["type"] || "";
}
}

然后构建控件

export class DynamicFromComponent implements OnInit {

constructor() { }

form:FormGroup;
controls:BaseControl<any>[];
ngOnInit() {
this.controls=this.createControls();
this.form=this.toFromGroup(this.controls);
}
//构建控件，如果需要放一些默认数据以及其他的验证都在这里进行
createControls() {
return [
new TextArea({
placeholder: "地方描述，最多120字。",
rows: 3,
key:"desc1"
}),
new TextArea({
placeholder: "路线描述，最多120字。",
rows: 3,
key:"desc2"
}),
new TextBox({
placeholder: "用户名",
value:"张三",
key:"userName"
})
]
}
//循环控件加到formgroup上
toFromGroup(controls:BaseControl<any>[]){
let group: any = {};
controls.forEach(item => {
//这个是要绑到formControlName上的值，如果都不设置具体名称的话，
//最后提交拿到只有最后改变的那个控件的值，我这写的和官网上的不一样
//我这里是一种投机行为
group[item.key] = new FormControl(item.key || "");
});
return new FormGroup(group);
}

onSubmit(){
//这里是提交时获取到的所有表单数据，如果都不填获取的是默认的值
console.log(this.form.value);
}

}

前台使用

<form (ngSubmit)="onSubmit()" [formGroup]="form">
<div *ngFor="let item of controls">
<div [ngSwitch]="item.controlType">
<!--通过判断类型来显示哪种表单-->
<input *ngSwitchCase="'textbox'" [type]="item.type" value="{{item.value}}" [formControlName]="item.key"
placeholder="{{item.placeholder}}">
<textarea *ngSwitchCase="'textarea'" value="{{item.value}}" rows="{{item.rows}}" [formControlName]="item.key"
placeholder="{{item.placeholder}}"></textarea>
</div>
</div>
<button type="submit">保存</button>
</form>

结果