本文将通过一个简单的例子简单展示Angular动态组件+响应式表单的使用。
【关键字】： Angular，动态组件，响应式表单，ComponentFactoryResolver，ViewContainerRef，ReactiveFormsModule
最终代码在最后
- 新建一个项目
ng new dynamic-form
- 新建一个模块（并在app.module中导入DynamicFormModule）
import { CommonModule } from '@angular/common';
import { NgModule } from '@angular/core';
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
declarations: [ ],
imports: [
CommonModule,
ReactiveFormsModule,
],
entryComponents: [ ],
exports: [ ]
})
export class DynamicFormModule { }
- 现在，我们需要创建用于创建动态表单的容器
动态表单的入口点是主容器。这将是我们的动态表单模块公开的唯一组件，负责接受表单配置并创建表单。
// dynamic-form-module components/dyanmic-form.component
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { FromItemConfig } from '../../models/dynamic-form.model';
@Component({
selector: 'app-dynamic-form',
templateUrl: './dynamic-form.component.html',
styleUrls: ['./dynamic-form.component.scss']
})
export class DynamicFormComponent implements OnInit {
@Input()
public formConfigs: Array<FromItemConfig> = new Array<FromItemConfig>();
@Output()
public readonly submitted: EventEmitter<any> = new EventEmitter<any>();
public formGroup: FormGroup;
public constructor(private fb: FormBuilder ) {
this.formGroup = this.fb.group({});
}
public ngOnInit(): void {
this.setFromControl();
}
public submitHandler(): void {
// tslint:disable-next-line: forin
for (const i in this.formGroup.controls) {
this.formGroup.controls[i].markAsDirty();
this.formGroup.controls[i].updateValueAndValidity();
}
if (this.formGroup.valid) {
this.submitted.emit(this.formGroup.value);
}
}
private setFromControl(): void {
this.formConfigs?.forEach((control, idx) => {
this.formGroup.addControl(control.controlName,
this.fb.control(control.defaultValue || null, control?.required ? Validators.required : null));
});
}
}
由于我们的表单是动态表单，因此我们需要接受一个配置数组才能知道要创建什么。为此，我们正在使用，@Input()它接受任何对象数组。
对于配置中的每个项目，我们都希望该对象包含一些必要属性，所以我们顶一个一个接口FromItemConfig
export interface FromItemConfig<T = any> {
type: FromItemType;
controlName: string;
label: string;
defaultValue?: T;
disabled?: boolean;
required?: boolean;
options?: Array<OptionItem>;
}
export interface OptionItem {
value: any;
label: string;
}
// 这里根据我们已经支持的表单控件类型定义了一个枚举
export enum FromItemType {
'checkbox' = 'checkbox',
'input' = 'input',
'number' = 'number',
'textarea' = 'textarea',
'radio' = 'radio',
// ...
}
- 在
app.componet.html中使用我们创建的dynamic-form
<app-dynamic-form [formConfigs]="formConfigs" (submitted)="submitHandler($event)"></app-dynamic-form>
public formConfigs: Array<FromItemConfig> = [
{
type: FromItemType.input,
controlName: 'name',
label: '姓名',
required: true
},
{
type: FromItemType.radio,
controlName: 'sex',
label: '性别',
defaultValue: 'man',
options: [{ label: '男', value: 'man' }, { label: '女', value: 'woman' }, { label: '未知', value: 'unknown' }]
},
{
type: FromItemType.input,
controlName: 'nationality',
label: '民族',
defaultValue: '汉'
},
{
type: FromItemType.number,
controlName: 'age',
label: '年龄',
},
{
type: FromItemType.input,
controlName: 'number',
label: '学号',
},
{
type: FromItemType.input,
controlName: 'class',
label: '班级',
},
{
type: FromItemType.textarea,
controlName: 'class',
label: '爱好',
},
{
type: FromItemType.checkbox,
controlName: 'reConfirm',
label: '已确认',
required: true
}
]
- 根据我们的需要去创建我们需要的表单项
// ***/dynamic-form/elements/
ng g c input
ng g c radio
...
这里以Input为例（这里我还用了ng-zorro），其他的可以看源码。
<nz-form-item [formGroup]="formGroup">
<nz-form-label [nzSpan]="6" nzFor="email" [nzRequired]="formConfig?.required">{{formConfig.label}}</nz-form-label>
<nz-form-control [nzSpan]="14" nzErrorTip="该项为必填项">
<input nz-input [placeholder]="formConfig.label" [formControlName]="formConfig.controlName"
[name]="formConfig.controlName">
</nz-form-control>
</nz-form-item>
import { Component, OnInit } from '@angular/core';
import { FormElementBaseClass } from '../../models/form-element-base.class';
import { FromItemConfig } from '../../models/dynamic-form.model';
import { FormGroup } from '@angular/forms';
@Component({
selector: 'app-input',
templateUrl: './input.component.html',
styleUrls: ['./input.component.scss']
})
export class InputComponent {
public formConfig: FromItemConfig;
public formGroup: FormGroup;
public get formControl(): { [key: string]: any } {
return this.formGroup.controls;
}
public constructor() { }
}
- 现在最关键的是dynamic-form.component 的实现
<div class="dynamic-form-container" (ngSubmit)="submitHandler()">
<form class="dynamic-form" nz-form [formGroup]="formGroup">
<ng-container *ngFor="let formConfig of formConfigs">
<div appDynamicForm [formConfig]="formConfig" [formGroup]="formGroup"></div>
</ng-container>
<nz-form-item nz-row class="submit-area" *ngIf="formConfigs?.length">
<nz-form-control [nzSpan]="14" [nzOffset]="6">
<button nz-button nzType="primary" (click)="submitHandler()">Submit</button>
</nz-form-control>
</nz-form-item>
</form>
</div>
import { Component, EventEmitter, Input, OnInit, Output } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';
import { FromItemConfig } from '../../models/dynamic-form.model';
@Component({
selector: 'app-dynamic-form',
templateUrl: './dynamic-form.component.html',
styleUrls: ['./dynamic-form.component.scss']
})
export class DynamicFormComponent implements OnInit {
@Input()
public formConfigs: Array<FromItemConfig> = new Array<FromItemConfig>();
public formGroup: FormGroup;
@Output()
public readonly submitted: EventEmitter<any> = new EventEmitter<any>();
public constructor(
private fb: FormBuilder,
) {
this.formGroup = this.fb.group({});
}
public ngOnInit(): void {
this.setFromControl();
}
public submitHandler(): void {
// tslint:disable-next-line: forin
for (const i in this.formGroup.controls) {
this.formGroup.controls[i].markAsDirty();
this.formGroup.controls[i].updateValueAndValidity();
}
if (this.formGroup.valid) {
this.submitted.emit(this.formGroup.value);
}
}
private setFromControl(): void {
this.formConfigs?.forEach((control, idx) => {
this.formGroup.addControl(control.controlName,
this.fb.control(control.defaultValue || null, control?.required ? Validators.required : null));
});
}
}
- 从上面的代码中，我们可以看到一个自定义指令
appDynamicForm，这个自定义指令是最终实现的一个关键。 componentFactoryResolver(动态组件加载器) 和 ViewContainerRef(视图容器)是我们实现的根本。
import { ComponentFactory, ComponentFactoryResolver, ComponentRef, Directive, Input, OnInit, ViewContainerRef } from '@angular/core';
import { FormGroup } from '@angular/forms';
import { NumberComponent } from '../elements/number/number.component';
import { RadioGroupComponent } from '../elements/radio-group/radio-group.component';
import { FromItemConfig } from '../models/dynamic-form.model';
import { CheckboxComponent } from './../elements/checkbox/checkbox.component';
import { InputComponent } from './../elements/input/input.component';
import { TextareaComponent } from './../elements/textarea/textarea.component';
// 通过这个常量将类型和最终指向的组件对应起来
const elementComponent: { [key: string]: any } = {
checkbox: CheckboxComponent,
input: InputComponent,
textarea: TextareaComponent,
radio: RadioGroupComponent,
number: NumberComponent,
};
@Directive({
selector: '[appDynamicForm]'
})
export class DynamicFormDirective implements OnInit {
@Input()
public formConfig: FromItemConfig;
@Input()
public formGroup: FormGroup;
private component: ComponentRef<any>;
public constructor(
// ComponentFactoryResolver && ViewContainerRef
private componentFactoryResolver: ComponentFactoryResolver,
private viewContainerRef: ViewContainerRef,
) { }
public ngOnInit(): void {
this.viewContainerRef.clear();
if (!this.formConfig) {
return;
}
const component: any = elementComponent[this.formConfig.type];
if (!component) {
return;
}
const componentFactory: ComponentFactory<any> = this.componentFactoryResolver.resolveComponentFactory(component);
const componentRef: ComponentRef<any> = this.viewContainerRef.createComponent(componentFactory);
componentRef.instance.formConfig = this.formConfig;
componentRef.instance.formGroup = this.formGroup;
}
}
至此，动态响应式表单的实现就基本完成了（过程讲的比较粗略），有问题欢迎讨论😊
🤞 查看所有代码
