Form array Angular

I'm having a hard time integrating this form with the html. can you help me? I've tried in some ways but I couldn't connect because I'm using FormArray. I made the form but to access the controls in the html is very complicated. I need it to be form Array, because this will have several arrays with categories. I need it to be form Array, because this will have several arrays with categories.


Form in Component TS

testeForm: FormGroup = this.fb.group({
feedstock: this.fb.array([
this.addFeedStockArray()
])
});


addFeedStockArray(): FormGroup {
return this.fb.group({
category: "",
position: "",
feedstockOptions: this.fb.array([
this.addFeedStockOptions()
]),
})
}


addFeedStockOptions(): FormGroup {
return this.fb.group({
name: '',
code: '',
price: {
amount: '',
currency: ['BRL'],
}
})
}


addfeedStockClick(): void {
(<FormArray>this.testeForm.get('feedstock')).push(this.addFeedStockOptions());
}

<div [formGroup]="testeForm" style="margin-left: 40px">
<div class="second-column row" formArrayName="feedstock" >
<div class="row" [formGroupName]="i" *ngFor="let feedstock of feedstock.get('feedstockOptions')?.controls; let i = index">
<div class="form-group col">
<label>
NOME:
</label>
<input class="form-control"
placeholder="--" formControlName="name" >
</div>
<div class="form-group col">
<label>
CÓDIGO:
</label>
<input class="form-control"
placeholder="--" formControlName="code">
</div>
<div class="form-group col">
<label>
PREÇO:
</label>
<input class="form-control"
currencyMask
[options]="{ prefix: 'R$ ', thousands: '.', decimal: ',', align:'left'}"
min="0"
placeholder="R$" formControlName="price" >
</div>
<div class="form-group col">
<i class="material-icons close-category" style="margin-top: 40px" (click)="removefeedStockClick(i)" >
close
</i>
</div>
</div>
</div>
</div>

Continue reading...