準(zhǔn)備工作
公司主營業(yè)務(wù)：成都做網(wǎng)站、成都網(wǎng)站設(shè)計(jì)、移動(dòng)網(wǎng)站開發(fā)等業(yè)務(wù)。幫助企業(yè)客戶真正實(shí)現(xiàn)互聯(lián)網(wǎng)宣傳，提高企業(yè)的競爭能力。成都創(chuàng)新互聯(lián)是一支青春激揚(yáng)、勤奮敬業(yè)、活力青春激揚(yáng)、勤奮敬業(yè)、活力澎湃、和諧高效的團(tuán)隊(duì)。公司秉承以“開放、自由、嚴(yán)謹(jǐn)、自律”為核心的企業(yè)文化，感謝他們對(duì)我們的高要求，感謝他們從不同領(lǐng)域給我們帶來的挑戰(zhàn)，讓我們激情的團(tuán)隊(duì)有機(jī)會(huì)用頭腦與智慧不斷的給客戶帶來驚喜。成都創(chuàng)新互聯(lián)推出五河免費(fèi)做網(wǎng)站回饋大家。
使用ng new async-form創(chuàng)建一個(gè)新工程，在app.module.ts中引入ReactiveFormsModule模塊并在根模塊中導(dǎo)入
重慶分公司
重慶分公司
import { ReactiveFormsModule } from '@angular/forms';
@NgModule({
imports: [
ReactiveFormsModule
]
})
構(gòu)建表單元素的基類
export class QuestionBase{ value: T;//表單元素的值 key: string;//表單元素鍵的名稱 label: string;//輸入元素的標(biāo)題 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; this.order = options.order === undefined ? 1 : options.order; this.controlType = options.controlType || ''; } }
繼承表單元素的基類
選擇框元素的數(shù)據(jù)類型繼承基類，設(shè)置了controlType 為'dropdown'并新增了屬性options數(shù)組
import { QuestionBase } from './question-base';
export class QuestionDropdown extends QuestionBase{
controlType = "dropdown";
options: { key: string, value: string }[] = [];
constructor(options: {} = {}) {
super(options);
this.options = options["options"] || [];
}
}
文本輸入框元素的數(shù)據(jù)類型繼承了基類，設(shè)置了controlType 為'textbox',新增了type屬性,定義input的類型
import { QuestionBase } from './question-base';
export class QuestionTextbox extends QuestionBase {
controlType = "textbox";
type:string;
constructor(options:{} ={}){
super(options);
this.type = options["type"]||""
}
}
生成數(shù)據(jù)
根據(jù)表單元素的派生類生成表單的數(shù)據(jù)。可以引入一個(gè)服務(wù)類，提供表單數(shù)據(jù)。
getQuestions(){
let questions:QuestionBase[]=[
new QuestionDropdown({
key:'brave',
label:'Bravery Rating',
options:[
{key:'solid',value:'Solid'},
{key:'great',value:'Great'},
{key:'good',value:'Good'},
{key:'unproven',value:'Unproven'}
],
order:3
}),
new QuestionTextbox({
key:'firstName',
label:'First name',
value:"Bombasto",
required:true,
order:1
}),
new QuestionTextbox({
key:'emailAddress',
label:"Email",
type:'email',
order:2
})
];
return questions.sort((a, b) => a.order - b.order);
} 將數(shù)據(jù)轉(zhuǎn)成FormControl類型
可以專門提供一個(gè)服務(wù)類，將表單的數(shù)據(jù)轉(zhuǎn)成FormControl類型
toFormGroup(questions: QuestionBase[]) { let group: any = {}; questions.forEach(question => { group[question.key] = question.required?new FormControl(question.value||"",Validators.required) :new FormControl(question.value||""); }); return new FormGroup(group); }
到這里就已經(jīng)完整構(gòu)建出一組FormControl 實(shí)例了。
為數(shù)據(jù)提供頁面模板
{{question.label}} is required
通過formGroup指令綁定表單數(shù)據(jù)，ngSwitch指令來選擇生成的模板，formControlName指令綁定對(duì)應(yīng)的表單數(shù)據(jù)的key值
import { Component, OnInit, Input } from '@angular/core';
import {FormGroup} from '@angular/forms';
import {QuestionBase} from '../question-base';
@Component({
selector: 'app-dynamic-form-question',
templateUrl: './dynamic-form-question.component.html',
styleUrls: ['./dynamic-form-question.component.less']
})
export class DynamicFormQuestionComponent implements OnInit {
@Input() question:QuestionBase;
@Input() form :FormGroup;
get isValid(){
return this.form.controls[this.question.key].valid;
}
constructor() { }
ngOnInit() {
}
} 表單組件需要兩個(gè)輸入，form和question，form來獲取對(duì)應(yīng)表單的鍵值是否校驗(yàn)成功，question來渲染對(duì)應(yīng)表單輸入元素。使用app-dynamic-form-question標(biāo)簽來使用組件
引用表單組件
獲取到questions數(shù)據(jù)后，通過*ngFor指令來渲染單個(gè)表單組件。
結(jié)束
到這里就完成了動(dòng)態(tài)創(chuàng)建表單的功能，以這種方式來創(chuàng)建表單，我們只需要開始時(shí)構(gòu)建出指定的單個(gè)輸入框或者其他表單元素的樣式之后，通過改變數(shù)據(jù)來控制表單的內(nèi)容，便于后期維護(hù)。
以上就是本文的全部內(nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持創(chuàng)新互聯(lián)。
