在 Angular 中找不到路径错误的控件

Question

component.ts：

 ngOnInit(): void {
 this.getVgAuditDetails();
 this.vgaReportForm = this.formBuilder.group({
  section_id: [this.sectionId],
  userId: [this.userObj.id],
  QuestionId: [this.questionId],
  answerDetails: this.formBuilder.array([]),
  vgaAuditNumber: [this.vgAudit.vga_audit_number],
  clientId: [this.clientId]
});
}
newAnswerDetails(): FormGroup {
return this.formBuilder.group({
  core: [''],
  vitalInterests: [''],
  bufferZones: [''],
  pivotalZones: [''],
  forwardPositions: [''],
  powerVaccums: [''],
  textbox1: [''],
  textbox2: [''],
  textbox3: [''],
  textbox4: [''],
  txtIntiative1: [''],
  txtIntiative2: [''],
  txtIntiative3: [''],
  txtOperatingProperties1: [''],
  txtOperatingProperties2: [''],
  txtOperatingProperties3: [''],
  txtOperatingProperties4: [''],
  txtOperatingProperties5: [''],
  txtOperatingProperties6: [''],
});
}

addAnswerDetails(): void {
 this.answerDetails = this.vgaReportForm.get('answerDetails') as FormArray;
 this.answerDetails.push(this.newAnswerDetails());
}

onSubmit(){
 console.log(this.vgaReportForm.value);
}

compoent.html：

<form action="" [formGroup]="vgaReportForm" (ngSubmit)="onSubmit()">
<div formArrayName="answerDetails">
  <!-- <div *ngFor="let vg of AnswerDetails.controls; let i=index"> -->
    <div [formGroupName]="i">
      <table class="table table-striped table-bordered table-hover dataTable">
        <thead>
          <tr class="thead">
            <th style="width: 25%">Zone of the Sphere</th>
            <th style="width: 25%">Strategic Intent</th>
          </tr>
          <tr>
            <td>Core</td>
            <td> <input type="text" class="form-control" formControlName="core"> </td>
          </tr>
          <tr>
            <td>Vital Interests</td>
            <td> <input type="text" class="form-control" formControlName="vitalInterests"> </td>
          </tr>
          <tr>
            <td>Buffer Zones</td>
            <td> <input type="text" class="form-control" formControlName="bufferZones"> </td>
          </tr>
          <tr>
            <td>Pivotal Zones</td>
            <td> <input type="text" class="form-control" formControlName="pivotalZones"> </td>
          </tr>
          <tr>
            <td>Forward Positions</td>
            <td> <input type="text" class="form-control" formControlName="forwardPositions"> </td>
          </tr>
          <tr>
            <td>Power Vacuums</td>
            <td> <input type="text" class="form-control" formControlName="powerVaccums"> </td>
          </tr>
        </thead>
    </table>
 </div>
 </div>
 </form>

当我运行这段代码时，它会抛出一个错误，例如，

找不到控件 路径：'answerDetails -> -> core'，找不到带有路径的控件： 'answerDetails -> -> vitalInterests'，找不到带有路径的控件： 'answerDetails -> -> forwardPositions' 等等

请帮我找到解决办法。

Answer 1

你应该在 html 中使用这段代码，也许它会有所帮助

formArrayName="AnswerDetails" *ngFor="let item of fg.get('AnswerDetails')['controls'];