05 동적 폼(Dynamic Forms) 01

동적 폼(Dynamic Forms)

수작업으로 폼을 만드는 데는 많은 비용과 시간이 소요될 수 있습니다. 특히 많은 양을 필요하고 서로 유사하며 급변하는 비즈니스 및 규정 요구사항을 충족시키기 위해 자주 변경됩니다.

비즈니스 오브젝트 모델을 설명하는 메타 데이터를 기반으로 폼을 동적으로 작성하는 것이 더 경제적 일 수 있습니다.

이 책은 formGroup을 사용하여 종전과 다른 컨트롤 타입과 유효성 검사를 사용하여 간단한 폼을 동적으로 표시하는 방법을 보여줍니다. 이것은 원시적인 시작입니다. 훨씬 더 다양한 질문, 보다 우아한 렌더링 및 탁월한 사용자 경험을 지원하기 위해 진화할 수 있습니다.

이 책의 예는 고용을 원하는 영웅을 위한 온라인 응용프로그램 경험을 구축하는 동적 폼입니다. 대행사는 으용프로그램 절차를 지속적으로 수정하고 있습니다. 응용프로그램 코드를 변경하지 않고 즉시 폼을 작성할 수 있습니다.

라이브 예제 / 다운로드 예제를 참조하십시오.

 

부트스트랩

먼저 AppModule이라는 NgModule을 만듭니다.

이 책은 리액티브 폼을 사용합니다.

ReactiveForm은 ReactiveFormsModule이라는 다른 NgModule에 속하므로 ReactiveForm 디렉티브에 액세스하려면 ReactiveFormsModule을 @angular/forms 라이브러리에서 가져와야합니다.

main.ts에서 AppModule을 부트스트랩합니다.

app.module.ts

import { BrowserModule }                from '@angular/platform-browser'; import { ReactiveFormsModule }          from '@angular/forms'; import { NgModule }                     from '@angular/core';   import { AppComponent }                 from './app.component'; import { DynamicFormComponent }         from './dynamic-form.component'; import { DynamicFormQuestionComponent } from './dynamic-form-question.component';   @NgModule({   imports: [ BrowserModule, ReactiveFormsModule ],   declarations: [ AppComponent, DynamicFormComponent, DynamicFormQuestionComponent ],   bootstrap: [ AppComponent ] }) export class AppModule {   constructor() {   } }

 

 

질문 모델

다음 단계는 폼기능에 필요한 모든 시나리오를 설명 할 수있는 개체 모델을 정의하는 것입니다. 영웅 응용프로그램 프로세스는 많은 질문이 있는 폼을 포함합니다. 문제는 모델에서 가장 기본적인 객체입니다.

다음 QuestionBase는 기본적인 질문 클래스입니다.

src/app/question-base.ts

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 || '';     } }

이 기본사항에서 TextboxQuestion 및 DropdownQuestion에서 텍스트박스 및 드롭다운 질문을 나타내는 두 개의 새로운 클래스를 파생시킬 수 있습니다. 아이디어는 폼이 특정 질문타입에 바인딩되고 적절한 컨트롤을 동적으로 렌더링한다는 것입니다.

TextboxQuestion은 type 프로퍼티를 통해 text, email 및 url과 같은 여러 HTML5 타입을 지원합니다.

src/app/question-textbox.ts

import { QuestionBase } from './question-base';   export class TextboxQuestion extends QuestionBase<string> {   controlType = 'textbox';   type: string;     constructor(options: {} = {}) {     super(options);     this.type = options['type'] || '';   } }

DropdownQuestion은 선택박스에 선택 목록을 표시합니다.

src/app/question-dropdown.ts

import { QuestionBase } from './question-base';   export class DropdownQuestion extends QuestionBase<string> {   controlType = 'dropdown';   options: {key: string, value: string}[] = [];     constructor(options: {} = {}) {     super(options);     this.options = options['options'] || [];   } }

다음은 질문을 FormGroup으로 변환하는 간단한 서비스인 QuestionControlService입니다. 간단히 말해서 폼그룹은 질문 모델의 메타 데이터를 사용하며 기본값과 유효성 검사 규칙을 지정할 수 있습니다.

src/app/question-control.service.ts

import { Injectable }   from '@angular/core'; import { FormControl, FormGroup, Validators } from '@angular/forms';   import { QuestionBase } from './question-base';   @Injectable() export class QuestionControlService {   constructor() { }     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);   } }