<强>准备工作
使用ng新async-form创建一个新工程,在app.module.ts中引入ReactiveFormsModule模块并在根模块中导入
从@angular/形式的进口{ReactiveFormsModule};
@NgModule ({
进口:[
ReactiveFormsModule
]
}）
之前
<>强构建表单元素的基类
出口类QuestionBase{
价值:T;//表单元素的值
关键:字符串;//表单元素键的名称
标签:字符串;//输入元素的标题
要求:布尔;//是否必输
秩序:数量;//排序
controlType:字符串;//表单的类型选择框/文本输入框
构造函数(选项:{
值# 63;:T,
关键# 63;:字符串,
标签# 63;:字符串,
需要# 63;:布尔,
订单# 63;:数量,
controlType& # 63;:字符串
}={}){
这一点。值=https://www.yisu.com/zixun/options.value;
这一点。关键=选项。关键| |”;
这一点。标签=选项。标签| |”;
这一点。要求=! ! options.required;
这一点。订单=选项。订单===定义& # 63;1:options.order;
这一点。controlType=选项。controlType | |”;
}
}
之前
<强>继承表单元素的基类
选择框元素的数据类型继承基类,设置了controlType为“下拉”并新增了属性选项数组
进口{QuestionBase}”。/question-base ';
出口类QuestionDropdown延伸QuestionBase之前
文本输入框元素的数据类型继承了基类,设置了controlType为“文本框”,新增了类型属性,定义输入的类型
进口{QuestionBase}”。/question-base ';
出口类QuestionTextbox延伸QuestionBase{
controlType=拔谋究颉?
类型:字符串;
构造函数(选项:{}={}){
超级(选项);
这一点。类型=选项(“类型”)| |”“
}
}
之前
<强>生成数据
根据表单元素的派生类生成表单的数据。可以引入一个服务类,提供表单数据。
getQuestions () {
让问题:QuestionBase []=[
新QuestionDropdown ({
关键:“勇敢”,
标签:“勇敢评级”,
选择:[
{关键:“固体”,价值:“固体”},
{关键:“伟大的”价值:“伟大的”},
{关键:‘好’,价值:‘好’},
{关键:“未经证实的”价值:“未经证实的”}
]，
秩序:3
}），
新QuestionTextbox ({
关键:“firstName”,
标签:“名字”,
价值:“Bombasto”,
要求:没错,
订单:1
}），
新QuestionTextbox ({
关键:“emailAddress”,
标签:“电子邮件”,
类型:“电子邮件”,
秩序:2
}）
];
返回的问题。排序((a, b)=比;一个。秩序——b.order);
}
<强>将数据转成FormControl类型
可以专门提供一个服务类,将表单的数据转成FormControl类型
toFormGroup(问题:QuestionBase []) {
让组:任何={};
的问题。forEach(问题=比;{
集团[问题。关键]=question.required& # 63;新FormControl (question.value | | ", Validators.required)
:新FormControl (question.value | | " ");
});
返回新FormGroup(集团);
}
之前
到这里就已经完整构建出一组FormControl实例了。
<强>为数据提供页面模板
& lt; div [formGroup]="形式"比;
& lt;标签[attr.for]=" question.key "在{{question.label}} & lt;/label>
& lt; div [ngSwitch]=" question.controlType "比;
& lt;输入* ngSwitchCase=拔谋究颉?formControlName)=皅uestion.key”
id="的问题。关键question.type“[型]=比;
& lt;选择id=蔽侍狻＜跋吕薄? ngSwitchCase=[formControlName]=" question.key "比;
* ngFor=& lt;选择“让选择的问题。选项”(价值)=" opt.key "比;
{{opt.value}}
& lt;/option>
& lt;/select>
& lt;/div>
& lt; div类=" errorMessage " * ngIf=? isValid”比;
{{问题。标签}}是必需的
& lt;/div>
& lt;/div>
