angular学习之动态创建表单的方法
2019/6/26 23:19:16
本文主要是介绍angular学习之动态创建表单的方法,对大家解决编程问题具有一定的参考价值,需要的程序猿们随着小编来一起学习吧!
准备工作
使用ng new async-form创建一个新工程,在app.module.ts中引入ReactiveFormsModule模块并在根模块中导入
import { ReactiveFormsModule } from '@angular/forms'; @NgModule({ imports: [ ReactiveFormsModule ] })
构建表单元素的基类
export class QuestionBase<T> { 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'; export class QuestionDropdown extends QuestionBase<string>{ controlType = "dropdown"; options: { key: string, value: string }[] = []; constructor(options: {} = {}) { super(options); this.options = options["options"] || []; } }
文本输入框元素的数据类型继承了基类,设置了controlType 为'textbox',新增了type属性,定义input的类型
import { QuestionBase } from './question-base'; export class QuestionTextbox extends QuestionBase<string> { controlType = "textbox"; type:string; constructor(options:{} ={}){ super(options); this.type = options["type"]||"" } }
生成数据
根据表单元素的派生类生成表单的数据。可以引入一个服务类,提供表单数据。
getQuestions(){ let questions:QuestionBase<any>[]=[ 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); }
将数据转成FormControl类型
可以专门提供一个服务类,将表单的数据转成FormControl类型
toFormGroup(questions: QuestionBase<any>[]) { 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); }
到这里就已经完整构建出一组FormControl 实例了。
为数据提供页面模板
<div [formGroup]="form"> <label [attr.for]="question.key">{{question.label}}</label> <div [ngSwitch]="question.controlType"> <input *ngSwitchCase="'textbox'" [formControlName]= "question.key" [id]="question.key" [type]="question.type"> <select [id]="question.key" *ngSwitchCase="'dropdown'" [formControlName]="question.key"> <option *ngFor="let opt of question.options" [value]="opt.key"> {{opt.value}} </option> </select> </div> <div class="errorMessage" *ngIf="!isValid"> {{question.label}} is required </div> </div>
通过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'] }) export class DynamicFormQuestionComponent implements OnInit { @Input() question:QuestionBase<any>; @Input() form :FormGroup; get isValid(){ return this.form.controls[this.question.key].valid; } constructor() { } ngOnInit() { } }
表单组件需要两个输入,form和question,form来获取对应表单的键值是否校验成功,question来渲染对应表单输入元素。使用app-dynamic-form-question标签来使用组件
引用表单组件
<div *ngFor="let question of questions" class="form-row"> <app-dynamic-form-question [question]="question" [form]="form"></app-dynamic-form-question> </div>
获取到questions数据后,通过*ngFor指令来渲染单个表单组件。
结束
到这里就完成了动态创建表单的功能,以这种方式来创建表单,我们只需要开始时构建出指定的单个输入框或者其他表单元素的样式之后,通过改变数据来控制表单的内容,便于后期维护。
以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持找一找教程网。
这篇关于angular学习之动态创建表单的方法的文章就介绍到这儿,希望我们推荐的文章对大家有所帮助,也希望大家多多支持为之网!
- 2024-11-01Vue.js 是什么-icode9专业技术文章分享
- 2024-11-01Vue3入门教程:从零开始搭建第一个Vue3项目
- 2024-11-01详解vueRouter4基础教程
- 2024-11-01Vuex4课程:初学者的完整入门指南
- 2024-10-31Vue3课程:新手入门到初级掌握
- 2024-10-31Vue3课程:新手入门到初级应用详解
- 2024-10-31VueRouter4课程:新手入门与实战指南
- 2024-10-31Vuex4学习:从入门到初级实战教程
- 2024-10-31Vue3教程:新手入门与基础实战
- 2024-10-31Vue教程:新手快速入门指南