Угловая вложенная динамическая форма

Question

Как сделать вложенную форму способом из документации angular.io:

https://stackblitz.com/angular/pbdkbbnmrdg

Цель состоит в том, чтобы иметь два DropdownQuestion из question.service.ts в дочерней группе с именем "details""и все остальное, как сейчас в родительской форме ... Так что в конце выглядеть примерно так:

{
    "firstName":"Bembasto",
    "email":"something@email.com",
    "details": {
      "dropdown1":{

      },
      "dropdown2":{

      }
    }
}

Answer 1

Урос, вам нужно понять, как код создает FormGroup и как создавать входные данные.

У нас есть сложный объект, к которому он привык

1. Создать форму
2. Показать входные данные

Сначала мы собираемся создать новый тип контрольной группы вопросов

import { QuestionBase } from './question-base';

export class GroupQuestion extends QuestionBase<string> {
  controlType = 'group';
  type: string;

  constructor(options: {} = {}) {
    super(options);
  }
}

И добавить новую собственность в базу вопросов

questions:any[];
//and change the constructor to allow give value
constructor(options: {
      value?: T,
      ...
      questions?:any[]
    } = {}) {
    this.value = options.value;
    ...
    this.questions = options.questions || [];
  }

Посмотрите, как код создает форму. Это сделано в вопросе control.service. Измените функцию на FormGroup, чтобы учесть typeControl "group"

toFormGroup(questions: QuestionBase<any>[] ) {
    let group: any = {};

    questions.forEach(question => {
      group[question.key] =  (question.controlType=='group')?
      this.toFormGroup(question.questions)
      :question.required ? new FormControl(question.value || '', Validators.required)
                                              : new FormControl(question.value || '');
    });
    return new FormGroup(group);
  }

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

let questions: QuestionBase<any>[] = [
  new DropdownQuestion({
    ...
  }),
  new TextboxQuestion({
    ...
  })
  , new GroupQuestion(
    {
      key: 'details',
      label: 'Details',
      order: 2,
      questions: [
        new TextboxQuestion({
            ...
        }),
        new DropdownQuestion({
            ...
        })
      ]
    }
  )
];

Ну, с этими изменениями у нас еще есть, как создать formGroup, но как мы показываем входные данные? Ранее мы собираемся изменить компонент dinamic-form, чтобы разрешить передавать в качестве аргумента «форму»

  @Input() form: FormGroup;
  subGroup:boolean=true;

  ngOnInit() {
    if (!this.form)
    {
      this.form = this.qcs.toFormGroup(this.questions);
      this.subGroup=false;
    }
  }

Мы добавляем новую свойство "подгруппа", чтобы указать, является ли подгруппа или нет. Итак, мы можем скрыть кнопку «отправить».

Наконец, мы изменили dynamic-form-question.component.html, чтобы учесть "group-questions"

<div [formGroup]="form">
  <label [attr.for]="question.key">{{question.label}}</label>

  <div [ngSwitch]="question.controlType">
    <input *ngSwitchCase="'textbox'" ...>
    <select *ngSwitchCase="'dropdown'" ...>
    </select>

    <div *ngSwitchCase="'group'" [formGroupName]="question.key">
       <app-dynamic-form [form]="form.get(question.key)"
           [questions]="question.questions"></app-dynamic-form>
    </div>
  </div> 

  <div  class="errorMessage" *ngIf="!isValid">{{question.label}} is required</div>

</div>

Да, если у нас есть групповой вопрос, мы показываем передачу app-dinamic-form в виде формы "form.get (question.key)". По этой причине мы изменили компонент dinamic-form-component: разрешить передачу formGroup и создавать новую форму только в том случае, если не передано значение.

В этом stackblitz приведен полный пример

ПРИМЕЧАНИЕ. Лично мне не нравится, когда компонент создает группу formGroup. Мне нравится создавать formGroup в main.component и передавать в качестве аргумента

в этот другой стек исследуйте эту идею. Компонент приложения имеет ngOnInit, который выполняет два вызова

ngOnInit()
  {
    this.questions = this.service.getQuestions();
    this.form=this.qcs.toFormGroup(this.questions);
  }

И нам нужно вручную присвоить значение "подгруппе" динамической формы