formControlName directive and FormArray issue

Question

I am learning an Angular book and I'm stuck on a reactive form example. I've copied one to one code from the book and it does not work at all. I've checked many docs and I found one different way to solve the problem, but still don't understand what I'm doing wrong with this concrete example. Can anyone help? Thanks!

Component's code:

 heroDetails = new FormGroup({
    name: new FormControl(''),
    realName: new FormControl(''),
    biometricData: new FormGroup({
      age: new FormControl(''),
      eyes: new FormControl(''),
      hair: new FormControl('')
    }),
    powers: new FormArray([])
    });

  get powers(): FormArray {
    return this.heroDetails.controls.powers as FormArray;
  }
  
  addPower() {
    this.powers.push(new FormControl(''));
  }

Template markup:

<form [formGroup]="heroDetails">
    <button (click)="addPower()">Add power</button>
    <div *ngFor="let power of powers.controls; index as i">
        <label>
        Power:
        <input type="text" [formControlName]="i">
        </label>
    </div>
</form>

When I launch the app and press "Add power" button I get the following error in browser's console:

ERROR Error: Cannot find control with name: '0'

The workaround I found:

<form [formGroup]="heroDetails">
    <button (click)="addPower()">Add power</button>
    <div *ngFor="let power of powers.controls; index as i">
        <label>
        Power:
        <input type="text" [formControl]="powers.controls[i]">
        </label>
    </div>
</form>

Answer 1

You need to put formArrayName in your controls loop.

<form [formGroup]="heroDetails">
    <button (click)="addPower()">Add power</button>
    <div formArrayName="powers" *ngFor="let power of powers.controls; index as i">
        <label>
        Power:
        <input type="text" [formControlName]="i">
        </label>
    </div>
</form>

working stackblitz example: https://stackblitz.com/edit/form-array-angular-ojruc3?file=src/app/app.component.html