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

Question

Hi I have a error trying to create dynamic form with reactive form module
Here is my code for html
<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>
It has four controls, stockName, stockPrice, currentTotal, and stockPercentage. With four of these controls can build an item in a form array.
Below is the code for component
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);
}
}
I got the error as following:
ERROR Error: Cannot find control with path: 'stocks -> stockName'
ERROR Error: Cannot find control with path: 'stocks -> currentTotal'
I am wondering what is the mistake that I made here.
Thank you for your help!

Answer 1

I fixed my issue with changing the
*ngFor="let stock of stockForm.get('stocks')['controls']; let i = index"
to
*ngFor="let stock of stocks; let i = index"
Also adding a new div of
<div [formGroup]="stock">
for the ts part, I declared
stocks: FormGroup[]
this.stocks = <FormGroup[]>(this.stockForm.controls.stocks as FormArray).controls;
Since it is a nested structure FormGroup -> FormArray -> FormGroup, so it takes me a bit of time to figure out.