Angular 5: nested form control within form group within form array

Question

I'm having trouble referring to a formControlName within a formGroup within a formArray.

The structure of my formGroup within my formArray is as follows:

    const marketingFileFormGroup = this.fb.group({
      file: [],
      fileName: [],
      fileType: [],
      fileUrl: [],
      createdBy: [],
      createdAt: [],
    });

This is my html setup at the moment:

<form [formGroup]="marketingProposal" novalidate>
  <div formArrayName="materials">
    <accordion>
      <accordion-group [isOpen]="true">
        <div accordion-heading class="lead clearfix">
          Marketing Materials
          <span class="float-right">
            <i class="fa fa-navicon" aria-hidden="true"></i>
          </span>
        </div>
        <div class="row">
          <div class="col-md-4">
            <button class="btn btn-primary" type="button" (click)="uploadFile()">Upload Marketing Material</button>
          </div>
        </div>
        <div class="m-3"></div>
        <div class="row">
          <div class="col-md-12 animated fadeIn" *ngIf="materials.controls.length > 0">
              <table class="table">
                  <thead>
                      <tr>
                          <th scope="col">File Name</th>
                      </tr>
                  </thead>
                  <tbody>
                    <tr *ngFor="let material of marketingMaterials; let i = index">                     
                        <td>
                          <div class="form-group">
                            <input class="form-control" [value]="material.value.fileName" formControlName="fileName">
                          </div>
                        <td>
                    </tr>
                  </tbody>
                  
                  ...

I am currently getting an error Cannot find control with path: 'materials -> fileName'

How do I reference fileName from within the formGroup which is within the formArray?

Answer 1

The line

<tr *ngFor="let material of marketingMaterials; let i = index"> 

Should be:

<tr *ngFor="let material of marketingMaterials; let i = index" [formGroupName]="i">