准备工作
使用ng new async-form创建一个新工程,在app.module.ts中引入ReactiveFormsModule模块并在根模块中导入
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
ReactiveFormsModule
]
})
构建表单元素的基类
export class QuestionBase {
value: T;//表单元素的值
key: string;//表单元素键的名称
label: string;//输入元素的标题
required: boolean;//是否必输
order: number;//排序
controlType: string;//表单的类型 选择框/文本输入框
constructor(options: {
value?: T,
key?: string,
label?: string,
required?: boolean,
order?: number,
controlType?: string
} = {}) {
this.value = options.value;
this.key = options.key || '';
this.label = options.label || '';
this.required = !!options.required;