问错误错误:找不到路径为'stocks -> stockName‘的控件

EN

<div class="container-fluid">
  <h2>Stock Rebalancer</h2>
  <div class="form-group">
    <input class="form-control" placeholder="Total Capital" [(ngModel)]="buyingPower">
  </div>
  <div class="form-group">
    <input class="form-control" placeholder="Buying power" [(ngModel)]="buyingPower">
  </div>
  <form [formGroup]="stockForm">
    <div formArrayName="stocks">
      <div class="form-group" *ngFor="let stock of stockForm.get('stocks')['controls']; let i = index">
        <div class="form-row">
          <div class="col">
            <input formControlName="stockName" class="form-control" placeholder="stock name">
          </div>
          <div class="col">
            <input formControlName="currentTotal" class="form-control" placeholder="$current total">
          </div>
          <div class="col">
            <input formControlName="stockPercentage" class="form-control" placeholder="percantage%">
          </div>
          <div class="col">
            <input formControlName="stockPrice" class="form-control" placeholder="$stock price">
          </div>
          <button class="btn btn-light" type="button" title="remove Stock" (click)="onRemoveStock(i)">X</button>
        </div>
      </div>
    </div>
  </form>
  <button class="btn btn-primary" type="button" title="Add Stock" (click)="addStock()">Add Stock</button>
  <!-- <button class="btn btn-primary" type="button" title="Add Stock" (click)="onRebalance()">Rebalance</button> -->
</div>

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, FormArray, FormControl } from '@angular/forms';
import { Plan } from 'src/app/interface/plan';

@Component({
  selector: 'app-stock-component-calculator',
  templateUrl: './stock-component-calculator.component.html',
  styleUrls: ['./stock-component-calculator.component.css']
})

export class StockComponentCalculatorComponent implements OnInit {

  constructor(private formBuilder: FormBuilder) { }

  stockForm: FormGroup;
  buyingPower: number;
  plans: Plan[]

  ngOnInit(): void {
    this.stockForm = this.formBuilder.group({
      stocks: this.formBuilder.array([])
    });
    const stockControl = this.stockForm.get('stocks')['controls'];

    for (var i = 0; i < 6; i++) {
      stockControl.push(this.formBuilder.group({
        stockName: new FormControl(''),
        currentTotal: new FormControl(0),
        stockPercentage: new FormControl(0),
        stockPrice: new FormControl(0),
      }));
    }
  }

  createStock(): FormGroup {
    return this.formBuilder.group({
      stockName: new FormControl(''),
      currentTotal: new FormControl(0),
      stockPercentage: new FormControl(0),
      stockPrice: new FormControl(0),
    });
  }

  addStock() {
    const stockControl = this.stockForm.get('stocks')['controls'];
    stockControl.push(this.createStock());
  }

  onRemoveStock(index) {
    const stockControl = this.stockForm.get('stocks')['controls'];
    stockControl.removeAt(index);
  }
}

ERROR Error: Cannot find control with path: 'stocks -> stockName'
ERROR Error: Cannot find control with path: 'stocks -> currentTotal'