05 동적 폼(Dynamic Forms) 03

설문 데이타

DynamicFormComponent는 @Input () 질문에 바인딩된 일련의 폼 질문 목록을 필요로합니다.

직업 응용프로그램에 대해 정의한 일련의 질문은 QuestionService로부터 리턴됩니다. 실제 앱에서는 이러한 질문을 스토리지에서 가져옵니다.

키포인트는 QuestionService가 리턴한 객체를 통해 영웅 직업 응용프그램의 질문을 완전히 제어한다는 것입니다. 설문 유지보수는 질문 배열에서 객체를 추가, 업데이트 및 제거하는 간단한 작업입니다.

src/app/question.service.ts

import { Injectable }       from '@angular/core';   import { DropdownQuestion } from './question-dropdown'; import { QuestionBase }     from './question-base'; import { TextboxQuestion }  from './question-textbox';   @Injectable() export class QuestionService {     // Todo: get from a remote source of question metadata   // Todo: make asynchronous   getQuestions() {       let questions: QuestionBase<any>[] = [         new DropdownQuestion({         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 TextboxQuestion({         key: 'firstName',         label: 'First name',         value: 'Bombasto',         required: true,         order: 1       }),         new TextboxQuestion({         key: 'emailAddress',         label: 'Email',         type: 'email',         order: 2       })     ];       return questions.sort((a, b) => a.order - b.order);   } }

마지막으로 AppComponent 셸에 폼의 인스턴스를 표시합니다.

src/app/app.component.ts

import { Component }       from '@angular/core';   import { QuestionService } from './question.service';   @Component({   selector: 'my-app',   template: `     <div>       <h2>Job Application for Heroes</h2>       <dynamic-form [questions]="questions"></dynamic-form>     </div>   `,   providers:  [QuestionService] }) export class AppComponent {   questions: any[];     constructor(service: QuestionService) {     this.questions = service.getQuestions();   } }

 

동적 템플릿

이 예제에서는 영웅을 위한 직업 응용프로그램을 모델링하였지만, QuestionService가 반환한 개체 외부의 특정 영웅 질문에 대한 참조는 없습니다.

이는 질문개체모델과 호환되는 모든 타입의 설문 조사에 대해 컴포넌트를 재사용할 수 있으므로 매우 중요합니다. 핵심은 특정 질문에 대한 하드코딩된 가정을 하지않고 폼을 렌더링하는데 사용되는 메타 데이터의 동적 데이터 바인딩입니다. 메타 데이터 컨트롤 외에도 유효성 검사를 동적으로 추가할 수 있습니다.

폼이 유효한 상태가 될때까지 저장버튼이 비활성화 됩니다. 폼이 유효하면 저장을 클릭할 수 있고, 앱은 현재 폼값을 JSON으로 표시합니다. 이것은 모든 사용자 입력이 다시 데이터 모델에 바인딩됨을 증명합니다. 데이터 저장 및 검색은 다음을 위한 연습용으로 남깁니다.

최종 형식은 다음과 같습니다.