Проблема с угловой динамической формой

Question

После этого урока: https://angular.io/guide/dynamic-form для создания динамической угловой формы.Все работает правильно.Но сейчас я пытаюсь добавить тип вопроса, где пользователь может продолжить добавлять дополнительные поля для ввода.У меня возникла проблема, похожая на эту проблему: Angular 2 Form "Не удается найти контроль с путем"

Но, к сожалению, мне не удалось найти исправление.И самое странное в том, что если я утешаю.печать всей формы, форматирование кажется правильным?

Это то, что у меня сейчас есть:

HTML:

<div [formGroup]="form">


      <div class= "p-col-12" [ngSwitch]="question.controlType">

        <div *ngSwitchCase="'medmulttextbox'" [formArrayName]="question.key">
          <div
           *ngFor="let item of form.get(question.key).controls; let i = index;">
        <div [formGroupName]="i">
          <input pInputText (focus)="searchDrugs(question.key + i)" type="text" [id]="question.key + i + 'rxterms'" placeholder="Drug name" [formControlName]="drugName">
          <input pInputText type="text" [id]="question.key + i +'drug_strengths'" placeholder="Strength list" [formControlName]="stength">
        </div>
  </div>

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

ts:

export class DynamicFormQuestionComponent implements AfterViewInit {
  @Input() question: QuestionBase<any>;
  @Input() form: FormGroup;
  get isValid() { return this.form.controls[this.question.key].valid; }

  constructor(private formBuilder: FormBuilder ) {
  }

  addField(questionKey) {
    console.log(this.form.get(questionKey));
    const formm = this.form.get(questionKey) as FormArray;
    formm.push(this.createItem());
  }

  createItem(): FormGroup {
    return this.formBuilder.group({
      drugName: '',
      stength: '',
    });
  }

}

question-control-service.ts

@Injectable()
export class QuestionControlService {
  constructor(private formBuilder: FormBuilder) { }

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

    questions.forEach(question => {
      if (question.controlType !== 'medmulttextbox') {
        group[question.key] = question.required ? new FormControl(question.value || '', Validators.required)
          : new FormControl(question.value || '');
      } else {
        // group[question.key] = new FormArray([]);
        // group[question.key] = new FormControl(this.formBuilder.array([]));
        group[question.key] = this.formBuilder.array([]);
      }
    });
    return new FormGroup(group);
  }
}

ошибка

ERROR Error: Cannot find control with path: 'medtextMultibox1 -> 0 -> '
    at _throwError (forms.js:2092)
    at setUpControl (forms.js:2000)
    at FormGroupDirective.push../node_modules/@angular/forms/fesm5/forms.js.FormGroupDirective.addControl (forms.js:4969)
    at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName._setUpControl (forms.js:5572)
    at FormControlName.push../node_modules/@angular/forms/fesm5/forms.js.FormControlName.ngOnChanges (forms.js:5491)
    at checkAndUpdateDirectiveInline (core.js:18533)
    at checkAndUpdateNodeInline (core.js:19801)
    at checkAndUpdateNode (core.js:19763)
    at debugCheckAndUpdateNode (core.js:20397)
    at debugCheckDirectivesFn (core.js:20357)

console.log (форма)

FormGroup {validator: null, asyncValidator: null, _onCollectionChange: ƒ, pristine: true, touched: false, …}
asyncValidator: null
     controls:
         brave: FormControl {validator: null, asyncValidator: null, 
                _onCollectionChange: ƒ, pristine: true, touched: false, …}
          emailAddress: FormControl {validator: ƒ, asyncValidator: null, 
                _onCollectionChange: ƒ, pristine: true, touched: false, …}
         firstName: FormControl {validator: ƒ, asyncValidator: null, 
                _onCollectionChange: ƒ, pristine: true, touched: false, …}
         medtextMultibox1: FormArray
                 asyncValidator: null
                 controls: Array(1)
                       0: FormGroup
                            asyncValidator: null
                            controls:
                                 drugName: FormControl {validator: null, 
                                           asyncValidator: null, 
                                           _onCollectionChange: ƒ, pristine: 
                                            true, touched: false, …}
                                 stength: FormControl {validator: null, 
                                           asyncValidator: null, 
                                           _onCollectionChange: ƒ, pristine: 
                                            true, touched: false, …}
...

Answer 1

Вам необходимо удалить [] из [formControlName]:

<input pInputText (focus)="searchDrugs(question.key + i)" type="text" [id]="question.key + i + 'rxterms'" placeholder="Drug name" formControlName="drugName">
<input pInputText type="text" [id]="question.key + i +'drug_strengths'" placeholder="Strength list" formControlName="stength">

При попытке использовать переменные с именами drugName и stength вместо строковых значений.