Динамические Формы

При создании форм обычно не проблема создавать формы ручной работы при создании одной или нескольких форм. Но когда количество форм, необходимых в проекте, увеличивается, этот подход быстро становится дорогостоящим и отнимает много времени, особенно когда они часто меняются для удовлетворения быстро меняющихся требований бизнеса и нормативных требований. В большинстве случаев экономически выгодно создавать формы динамически на основе метаданных, описывающих модель бизнес-объекта.

начальная загрузка

Начните с создания NgModule под названием AppModule.

Мы будем использовать реактивную форму для реализации динамических форм.

Реактивные формы принадлежат другому NgModule, называемому ReactiveFormsModule, поэтому для доступа к любым директивам реактивных форм вам необходимо импортировать ReactiveFormsModule из библиотеки @ angular / forms.

Загрузите AppModule в main.ts.

App.module.ts

Код TypeScript:

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() {
  }
}

Демонстрация в реальном времени:

См. Pen app.module.ts от w3resource ( @ w3resource ) в CodePen .

Main.ts

Код TypeScript:

import { enableProdMode } from '@angular/core';
import { platformBrowserDynamic } from '@angular/platform-browser-dynamic';
import { AppModule } from './app/app.module';
import { environment } from './environments/environment';
if (environment.production) {
  enableProdMode();
}
platformBrowserDynamic().bootstrapModule(AppModule);

Демонстрация в реальном времени:

См. Pen main.ts от w3resource ( @ w3resource ) в CodePen .

Модель вопроса

Следующим шагом является определение объектной модели, которая может описать все сценарии, необходимые для функциональности формы. Процесс подачи заявки на героя включает форму с множеством вопросов. Вопрос является самым фундаментальным объектом в модели.

Следующая QuestionBase является фундаментальным классом вопросов.

Вопрос-base.ts

Код TypeScript:

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

Демонстрация в реальном времени:

См. Pen вопрос-base.ts от w3resource ( @ w3resource ) на CodePen .

Из этой базы вы можете получить два новых класса в TextboxQuestion и DropdownQuestion, которые представляют текстовое поле и выпадающие вопросы. Идея заключается в том, что форма будет привязана к конкретным типам вопросов и динамически отображать соответствующие элементы управления.

TextboxQuestion поддерживает несколько типов HTML5, таких как текст, электронная почта и URL, через свойство type.

Вопрос-textbox.ts

Код TypeScript:

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

Демонстрация в реальном времени:

См. Pen вопрос-textbox.ts от w3resource ( @ w3resource ) на CodePen .

DropdownQuestion представляет список вариантов в поле выбора.

Вопрос-dropdown.ts

Код TypeScript:

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

Демонстрация в реальном времени:

См. Pen вопрос-dropdown.ts от w3resource ( @ w3resource ) на CodePen .

Далее идет QuestionControlService, простой сервис для преобразования вопросов в FormGroup. Вкратце, группа форм использует метаданные из модели вопроса и позволяет указывать значения по умолчанию и правила проверки.

Вопрос-control.service.ts

Код TypeScript:

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

Демонстрация в реальном времени:

См. Pen вопрос-control.service.ts от w3resource ( @ w3resource ) на CodePen .

Компоненты формы вопроса

Теперь, когда вы определили полную модель, вы готовы создавать компоненты для представления динамической формы.

DynamicFormComponent является точкой входа и основным контейнером для формы.

Динамический форм-component.html

HTML-код:

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

Код TypeScript:

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: 'app-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);
  }
}

Демонстрация в реальном времени:

См. Pen form-component.html от w3resource ( @ w3resource ) в CodePen .

Он представляет список вопросов, каждый из которых связан с компонентным элементом <app-question>. Тег <app-question> соответствует DynamicFormQuestionComponent, компоненту, отвечающему за отображение деталей каждого отдельного вопроса на основе значений в объекте вопроса с привязкой к данным.

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>

Код TypeScript:

import { Component, Input } from '@angular/core';
import { FormGroup }        from '@angular/forms';
import { QuestionBase }     from './question-base';
@Component({
  selector: 'app-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; }
}

Демонстрация в реальном времени:

См. Pen form-component.ts от w3resource ( @ w3resource ) в CodePen .

Обратите внимание, что этот компонент может представлять любой тип вопроса в вашей модели. На данный момент у вас есть только два типа вопросов, но вы можете представить себе еще больше. NgSwitch определяет тип отображаемого вопроса.

В обоих компонентах вы полагаетесь на formGroup Angular, чтобы подключить шаблон HTML к базовым объектам управления, заполненным из модели вопроса правилами отображения и проверки.

formControlName и formGroup являются директивами, определенными в ReactiveFormsModule. Шаблоны могут обращаться к этим директивам напрямую, поскольку вы импортировали ReactiveFormsModule из AppModule.

Данные анкеты

DynamicFormComponent ожидает список вопросов в виде массива, привязанного к вопросам @Input ().

Набор вопросов, которые вы определили для заявления о приеме на работу, возвращается из службы QuestionService. В реальном приложении вы бы получили эти вопросы из хранилища.

Ключевым моментом является то, что вы полностью управляете вопросами приложения-героя с помощью объектов, возвращаемых из QuestionService. Обслуживание анкет - это простой процесс добавления, обновления и удаления объектов из массива вопросов.

Код TypeScript:

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

Демонстрация в реальном времени:

См. Pen service.ts от w3resource ( @ w3resource ) в CodePen .

Наконец, отобразите экземпляр формы в оболочке AppComponent.

Код TypeScript:

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

Демонстрация в реальном времени:

См. Pen app.component.ts от w3resource ( @ w3resource ) в CodePen .

Предыдущая: Проверка формы
Далее: Наблюдаемые