Cannot find control with path error in for formArray in 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>

When I ran this code it throws an error like,

Cannot find control with path: 'answerDetails -> -> core', Cannot find control with path: 'answerDetails -> -> vitalInterests', Cannot find control with path: 'answerDetails -> -> forwardPositions' and more

Please help me to find a solution.

you are using i but this line is commented. Uncommenting doesn't fix? — Filas Siuma
– Filas Siuma, Commented Sep 2, 2021 at 13:23

danish ali · Accepted Answer · 2021-09-02 13:39:26Z

0

you should use this code in html maybe it helps

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

answered Sep 2, 2021 at 13:39

danish ali

1321 silver badge5 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

danish ali Over a year ago

can u please show some screenshot or anything so i can help

Collectives™ on Stack Overflow

Cannot find control with path error in for formArray in angular

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest