angular - 使用 FormArray 在嵌套 ngFor 下定义 Angular 9 中的反应式表单

Question

您好，我正在尝试定义 Angular 9 的嵌套 ngFor 中存在的反应式表单控件，尝试了几件事，但我无法完成这项工作。无论用户选择什么，我都想在父 FormGroup 中抓取它。请指出我的错误。提前致谢

父组件.html

<form class="col s12" [formGroup]="examFormGroup" (ngSubmit)="onSubmitExam()">
    <ul class="collapsible" #examcollapsible>
        <li *ngFor="let question of questions; let i = index; last as isLast">
          <div class="collapsible-header indigo lighten-1 white-text">
              
              <div class="header">{{i + 1}}</div>
              <p class="flowtext pl-1 truncate truncate-at hide-on-small-only">
                {{question.statement}}
              </p>
              <div class="bookmark-icon right tooltipped" 
              
              (click)="question.isbookMarked = !question.isbookMarked; modifyTooltipText(i, question.isbookMarked, $event)" #tooltip> 
                <i [ngClass]="(question.isbookMarked ? 'fas fa-bookmark' : 'far fa-bookmark')"></i>
              </div>
            
            </div>
          <div class="collapsible-body" formArrayName="examAnswers">
            <div class="flow-text mb-1">
              {{question.statement}}
            </div>
              <span *ngIf="question.type === questionType.SINGLE_ANSWER_TYPE">
                <app-single-answer-type 
                [radioOptions]= "question.options"
                [parentForm]="examFormGroup"
                (singleAnswerControlsChanged)="onSingleAnswerAdded($event)"
                >

                </app-single-answer-type>
              </span>
            </div>
        </li>
      </ul>
      <a class="waves-effect waves-light btn btn-large">Submit Exam</a>
</form>

parent.component.ts (fb 是 FormBuilder)

    public examFormGroup =  this.fb.group({
    singleAnswers: this.fb.array([

    ])
  })
  
 public get examAnswers(){
    return this.examFormGroup.get('examFormGroup') as FormArray;
  }

  public onSingleAnswerAdded(controlname){

    this.examAnswers.controls.push(controlname);
   
  }

child.component.html

<div class="row"  [formGroup]="parentForm" *ngIf="radioOptions">
<div class="col s12 radio-text" formArrayName="singleAnswers">
    <p *ngFor="let radioOption of radioOptions; let i = index">
        <label>
          <input (click)="controlAdded()" type="radio" formControlName="{{radioOption}}"/>
          <span class="flow-text question-text-color">{{radioOption}} </span>
        </label>
      </p>
</div>

child.component.ts

    @Input() public radioOptions: string[];
  @Input() public parentForm: FormGroup;

  @Output() public singleAnswerControlsChanged = new EventEmitter<any>();

  constructor() { }

  ngOnInit(): void {
  }

  public controlAdded(){
    this.singleAnswerControlsChanged.emit(this.parentForm.get('singleAnswers').value);
  }

我现在得到的错误：

ERROR Error: Cannot find control with path: 'singleAnswers -> Battle'
at _throwError (forms.js:3576)
at setUpControl (forms.js:3398)
at FormGroupDirective.addControl (forms.js:7679)
at FormControlName._setUpControl (forms.js:8451)
at FormControlName.ngOnChanges (forms.js:8368)
at FormControlName.wrapOnChangesHook_inPreviousChangesStorage (core.js:26975)
at callHook (core.js:4762)
at callHooks (core.js:4722)
at executeInitAndCheckHooks (core.js:4662)
at selectIndexInternal (core.js:9724)

标签： angularangular-reactive-formsngforformarray