Ошибка: не удается найти элемент управления с путем

Question

Я новичок в Angular и пытался расширить пример кода с: Angular 4 Form FormArray Добавить кнопку для добавления или удаления строки ввода формы

Если в раскрывающемся списке была выбрана определенная опция, новые опции для этой опции должны быть выражены. Я добрался до этого момента без проблем, но реализация тегов formControlName для этих «низкоуровневых опций» выдает мне ошибку:

ContentComponent.html: 56 Ошибка. Ошибка: не удается найти элемент управления с путем: «inhalt -> 0 -> optionsKey» (…)

точная строка в .html: (input formControlName = "optionsKey")

Я искал эти ошибки в других потоках ( Форма Angular 2 "Не удается найти элемент управления с путем" ) или ( Реактивные формы Angular 2: Невозможно найти элемент управления с путем ) или ( Ошибка: не удается найти элемент управления с путем: 'x' angular 2 ), но их проблемы основаны на создании компонентов ReactiveForm без FormBuilder. Я создал все свои ReactiveForm-Components с помощью Formbuilder, который вы увидите в моем коде.

Возможно, я что-то упустил или делаю это неправильно?

content.html

<code><h3 class="page-header">Formular-Abschnitt hinzufügen</h3>
<button type="button" (click)="addNewFormControl()" class="btn btn-primary">Neues Formularelement</button><br>
<form [formGroup]="formContent">
  <div>
    <label>Bezeichnung des Abschnittes</label>
    <input formControlName="absatz">
  </div>
  <div formArrayName="inhalt">

    <!--
    In the template we are iterating this formarray,
        and that is just the path to the formarray, which is:

        invoiceForm.controls.itemRows.controls

        'invoiceForm' being the complete form object, 'controls' being the content of the form object,
        'itemRows' being the (form)array in the form, 'controls' being the content of the formarray.

    -->

    <div *ngFor="let itemrow of formContent.controls.inhalt.controls; let i=index" [formGroupName]="i">
      <h4>Formular-Element #{{ i + 1 }}</h4>
      <div class="form-group">
        <label>Element-Name</label>
        <input formControlName="label" class="form-control">
      </div>
      <div class="form-group">
        <label>Element-Key</label>
        <input formControlName="key" class="form-control">
      </div>
      <div class="form-group">
        <label>Element-zwingend notwendig?</label>
        <input type="checkbox" formControlName="required" class="form-control">
      </div>
      <div class="form-group">
        <label>Element-Position</label>
        <input formControlName="order" class="form-control">
      </div>
      <div class="form-group">
        <label>Element-Art</label>
        <select formControlName="controlType" class="form-control">
          <option>InputField</option>
          <option>Checkbox</option>
          <option>Radiobutton</option>
          <option>Dropdown</option>
          <option>Beschreibungstext</option>
        </select>
        <div [ngSwitch]="formContent.value.inhalt[i].controlType">
          <div *ngSwitchCase="'Checkbox'">
            <h3>Optionen definieren:</h3>
            <button (click)="addFormControlOptions()">Neue Option hinzufügen</button>
            <div *ngFor="let test of itemrow.controls.options.controls; let x = index" >
              {{test.controls.optionsKey.value}}
              <div>
                <label >Key: </label>
                <input formControlName="optionsKey" >
              </div>
              <div>
                <label>Value: </label>
                <input>
              </div>
              <button (click)="deleteFormControlOptions(x)">Option entfernen</button>
            </div>



          </div>
          <div *ngSwitchCase="''">
            <p>lololololo</p>
          </div>
          <div *ngSwitchDefault="">
            <p>DEFAULT</p>
          </div>
        </div>


      </div>
      <button *ngIf="formContent.controls.inhalt.controls.length > 1" (click)="deleteFormControl(i)"
              class="btn btn-danger">Delete Button
      </button>
    </div>
  </div>

</form>
<!--<pre>{{formContent.value | json}}

-> Formular-Abschnitt speichern

content.ts

import { Component, OnInit } from '@angular/core';
import {Form, FormArray, FormBuilder, FormGroup} from '@angular/forms';
import {isBoolean, isNumber} from 'util';

@Component({
  selector: 'app-content',
  templateUrl: './content.component.html',
  styleUrls: ['./content.component.css']
})
export class ContentComponent implements OnInit {


  public formContent: FormGroup;
  absatz;

  constructor(private _fb: FormBuilder) { }

  ngOnInit() {
    this.formContent = this._fb.group({
      absatz: '',
      inhalt: this._fb.array([this.initFormElements()])
    });
  }
  initFormElements() {
    return this._fb.group({
      label: '',
      key: '',
      order: isNumber(),
      controlType: '',
      required: isBoolean(),
      options: this._fb.array([this.initFormElementOptions()])
    });
  }
  initFormElementOptions() {
    return this._fb.group({
      optionsKey: '',
      optionsValue: ''}
    );
  }
  addNewFormControl() {
    const control = <FormArray>this.formContent.controls['inhalt'];
    control.push(this.initFormElements());
  }
  deleteFormControl(index: number) {
    const control = <FormArray>this.formContent.controls['inhalt'];
    control.removeAt(index);
  }

  saveData() {

    return this.formContent.value;
  }
   addFormControlOptions() {
   // const control = <FormArray>this.formContent.controls['inhalt'].controls[0].options;
   // control.push(this.initFormElementOptions());
   }
   deleteFormControlOptions(index: number) {
     const control = <FormArray>this.formContent.controls['inhalt'].value[0].options;
     control.removeAt(index);
   }
}

Plunker: https://embed.plnkr.co/LIcp9vpGDCAWH9qZacQT/

Заранее спасибо!

Обновление: Мне нужно было добавить formArrayName = "options" в мой SwitchCase и formGroupName = "x" (где я использовал индекс x для ngFor) для ngFor-Div.

Answer 1

вам нужно указать, что ваш элемент управления находится в группе массивов

         <div formArrayName="options">
            <label >Key: </label>
            <input formControlName="optionsKey" >
          </div>