Как добавить поле в форму при использовании ReactiveForm?

Question

[Максим Тарабрин]

Здравствуйте, каким образом можно реализовать добавление поля в форму. Если форма построена на reactiveForm?

У меня есть форма с полями: Фамилия, имя, отчество и самое главное поле select выбора темы. После выбора темы из выпадающего списка идёт проверка имеется ли дети у этого пункта. А затем если есть то добавляю поле еще одно ниже. То есть эти поле в массиве должны быть по сути.

С добавление поля разобрался, воспользовался Renderer2 и сделал такую функцию которая добавляет в мою форму новое поле.

addField() {
    const formGroup = this.renderer.createElement('div');
    this.renderer.setAttribute(formGroup, 'class', 'form-group');

    const fieldLabel = this.renderer.createElement('label');
    const textLabel = this.renderer.createText('Дополнительное поле');
    this.renderer.appendChild(fieldLabel, textLabel);
    this.renderer.appendChild(formGroup, fieldLabel);

    const field = this.renderer.createElement('select');
    this.renderer.setAttribute(field, 'class', 'form-control');

    for (let i = 0; i < 10; i++) {
      const option = this.renderer.createElement('option');
      this.renderer.setAttribute(option, 'value', i.toString() );
      const textOption = this.renderer.createText(i + ' элемент');
      this.renderer.appendChild(option, textOption);
      this.renderer.appendChild(field, option);
    }

    this.renderer.appendChild(formGroup, field);
    this.renderer.appendChild(this._forminfo.nativeElement, formGroup);
  }

Форма:

<form class="col-md-6" [formGroup]="cForm" (ngSubmit)="addPost(cForm.value)">
                    <div class="form-group">
                      <label for="lastName">Фамилия</label>
                      <input type="text" class="form-control" formControlName="lastName" id="lastName" placeholder="Фамилия">
                    </div>
                    <div class="form-group">
                      <label for="firstName">Имя</label>
                      <input type="text" formControlName="firstName" class="form-control" id="firstName" placeholder="Имя">
                    </div>
                    <div class="form-group">
                      <label for="middleName">Отчество</label>
                      <input type="text" formControlName="middleName" class="form-control" id="middleName" placeholder="Отчество">
                    </div>
                    <div #selectFields>
                      <div class="form-group">
                        <label for="themeComplaint">Тема обращения</label>
                        <select type="select" formContr<code></code>olName="themeComplaint" class="form-control" id="themeComplaint" placeholder="Тема обращения">
                          <option *ngFor="let opt of themesComplaint" [value]="opt.id">{{ opt.name }}</option>
                      </select>
                    </div>
                    </div>
                    <button type="submit" [disabled]="!cForm.valid" class="btn btn-default">Submit</button>
                    <button type="button" class="btn btn-default" (click)="addField();">Добавить поле</button>
                  </form>

Описание формы:

constructor(private fb: FormBuilder,
              private elementRef: ElementRef,
              private renderer: Renderer2) {
    this.cForm = fb.group({
      'lastName': [null],
      'firstName': [null, Validators.compose([Validators.required,
                                                Validators.minLength(30),
                                                Validators.maxLength(500)])],
      'middleName': [null],
      'themeComplaint': [{select: [2]}],
    });
  }

И некоторая модель с данными категорий:

export const themesComplaint = [
  {
    id: 1,
    name: '1',
    parentId: null
  },
  {
    id: 2,
    name: '2',
    parentId: null
  },
  {
    id: 3,
    name: '3',
    parentId: null
  },
  {
    id: 4,
    name: '4',
    parentId: 1
  },
  {
    id: 5,
    name: '5,
    parentId: 2
  }
];