Angular Dynamic Form的问题

Question

按照本教程：https://angular.io/guide/dynamic-form创建动态角形。一切都运作正常。但现在我正在尝试添加一个问题类型，用户可以继续添加更多字段进行输入。我遇到了类似于这个问题的问题：Angular 2 Form "Cannot find control with path"

但不幸的是，我一直无法找到修复程序。而最奇怪的部分是，如果我console.print整个表单格式似乎是正确的？

这就是我目前拥有的：

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

}

问题 - 控制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的变量而不是字符串值。