05 동적 폼(Dynamic Forms) 02

질문 폼 컴포넌트

이제 완성된 모델을 정의 했으므로 동적 폼을 나타내기 위해 컴포넌트를 만들 준비가 되었습니다.

DynamicFormComponent는 폼의 진입점이며 주 컨테이너입니다.

dynamic-form.component.html

<div>     <form (ngSubmit)="onSubmit()" [formGroup]="form">         <div *ngFor="let question of questions" class="form-row">             <df-question [question]="question" [form]="form">             </df-question>         </div>         <div class="form-row">             <button type="submit" [disabled]="!form.valid">저장</button>         </div>     </form>     <div *ngIf="payLoad" class="form-row">         <strong>Saved the following values</strong><br>         {{payLoad}}     </div> </div>

 

dynamic-form.component.ts

import { Component, Input, OnInit } from '@angular/core'; import { FormGroup }                from '@angular/forms'; import { QuestionBase }             from './question-base'; import { QuestionControlService }   from './question-control.service';   @Component({     selector: 'dynamic-form',     templateUrl: './dynamic-form.component.html',     providers: [ QuestionControlService ] }) export class DynamicFormComponent implements OnInit{     @Input() questions: QuestionBase<any>[] = [];     form: FormGroup;     payLoad = '';     constructor(private qcs: QuestionControlService){}       ngOnInit(){         this.form = this.qcs.toFormGroup(this.questions);     }       onSubmit(){         this.payLoad = JSON.stringify(this.form.value);     } }

<df-question> 컴포넌트 엘리먼트에 묶여있는 질문 목록을 제시합니다. <df-question> 태그는 DynamicFormQuestionComponent와 일치합니다. 이 컴포넌트는 데이터 바인딩 질문 객체의 값을 기반으로 각 개별 질문의 세부 정보를 표시합니다.

dynamic-form-question.component.html

<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>

 

dynamic-form-question.component.ts

import { Component, Input } from '@angular/core'; import { FormGroup }        from '@angular/forms';   import { QuestionBase }     from './question-base';   @Component({   selector: 'df-question',   templateUrl: './dynamic-form-question.component.html' }) export class DynamicFormQuestionComponent {   @Input() question: QuestionBase<any>;   @Input() form: FormGroup;   get isValid() { return this.form.controls[this.question.key].valid; } }

이 컴포넌트는 모델에 모든 타입의 질문을 표시할 수 있습니다. 이 시점에서 두 가지 타입의 질문 만 할 수 있지만 더 많은 것을 상상할 수 있습니다. ngSwitch는 표시 할 질문 타입을 결정합니다.

 

두 구성 요소 모두 Angular의 formGroup을 사용하여 템플릿 HTML을 기본 컨트롤 객체에 연결하고 질문 모델에서 표시 및 유효성 검사 규칙으로 채 웁니다.

 

formControlName 및 formGroup은 ReactiveFormsModule에 정의 된 지시문입니다. 템플릿은 AppModule에서 ReactiveFormsModule을 가져온 이후 직접 이러한 지시문에 액세스할 수 있습니다.