微客导航 » 文章资讯 » angular学习之动态创建表单的方法

angular学习之动态创建表单的方法

2023-09-04 19:23:05 334

准备工作

使用ngnewasync-form创建一个新工程，在app.module.ts中引入ReactiveFormsModule模块并在根模块中导入

import{ReactiveFormsModule}from'@angular/forms';
@NgModule({
imports:[
ReactiveFormsModule
]
})

构建表单元素的基类

exportclassQuestionBase{
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;
this.order=options.order===undefined?1:options.order;
this.controlType=options.controlType||'';
}
}

继承表单元素的基类

选择框元素的数据类型继承基类，设置了controlType为'dropdown'并新增了属性options数组

import{QuestionBase}from'./question-base';

exportclassQuestionDropdownextendsQuestionBase{
controlType="dropdown";
options:{key:string,value:string}[]=[];

constructor(options:{}={}){
super(options);
this.options=options["options"]||[];
}
}

文本输入框元素的数据类型继承了基类，设置了controlType为'textbox',新增了type属性,定义input的类型

import{QuestionBase}from'./question-base';

exportclassQuestionTextboxextendsQuestionBase{
controlType="textbox";
type:string;
constructor(options:{}={}){
super(options);
this.type=options["type"]||""
}
}

生成数据

根据表单元素的派生类生成表单的数据。可以引入一个服务类，提供表单数据。

getQuestions(){
letquestions:QuestionBase[]=[
newQuestionDropdown({
key:'brave',
label:'BraveryRating',
options:[
{key:'solid',value:'Solid'},
{key:'great',value:'Great'},
{key:'good',value:'Good'},
{key:'unproven',value:'Unproven'}
],
order:3
}),
newQuestionTextbox({
key:'firstName',
label:'Firstname',
value:"Bombasto",
required:true,
order:1
}),
newQuestionTextbox({
key:'emailAddress',
label:"Email",
type:'email',
order:2
})
];
returnquestions.sort((a,b)=>a.order-b.order);
}

将数据转成FormControl类型

可以专门提供一个服务类，将表单的数据转成FormControl类型

toFormGroup(questions:QuestionBase[]){
letgroup:any={};

questions.forEach(question=>{
group[question.key]=question.required?newFormControl(question.value||"",Validators.required)
:newFormControl(question.value||"");
});
returnnewFormGroup(group);
}

到这里就已经完整构建出一组FormControl实例了。

为数据提供页面模板


{{question.label}}




{{opt.value}}

{{question.label}}isrequired

通过formGroup指令绑定表单数据，ngSwitch指令来选择生成的模板，formControlName指令绑定对应的表单数据的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']
})
exportclassDynamicFormQuestionComponentimplementsOnInit{
@Input()question:QuestionBase;
@Input()form:FormGroup;
getisValid(){
returnthis.form.controls[this.question.key].valid;
}
constructor(){}

ngOnInit(){
}

}

表单组件需要两个输入，form和question，form来获取对应表单的键值是否校验成功，question来渲染对应表单输入元素。使用app-dynamic-form-question标签来使用组件

引用表单组件

获取到questions数据后，通过*ngFor指令来渲染单个表单组件。

结束

到这里就完成了动态创建表单的功能，以这种方式来创建表单，我们只需要开始时构建出指定的单个输入框或者其他表单元素的样式之后，通过改变数据来控制表单的内容，便于后期维护。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持毛票票。

声明：本文内容来源于网络，版权归原作者所有，内容由互联网用户自发贡献自行上传，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任。如果您发现有涉嫌版权的内容，欢迎发送邮件至：czq8825#qq.com（发邮件时，请将#更换为@）进行举报，并提供相关证据，一经查实，本站将立刻删除涉嫌侵权内容。

返回顶部
3162201930
czq8825@qq.com

angular学习之动态创建表单的方法

热门推荐

随机推荐