I'm facing an issue with binding my input while using Angular Reactive forms. The forms have been initialized with initial values.
https://i.sstatic.net/ipTRU.png
My HTML structure (using form instead of div) remains the same:
<div [formGroup]="secondFormGroup" class="steper_ctform">
<div class="steper_sstitle">Add Article</div>
<mat-form-field appearance="outline" class="steper_artsrh">
<mat-label>Search Product</mat-label>
<input matInput placeholder="E.g. 151FGD" class="steper_inp_as">
</mat-form-field>
<button (click)="addSfdynamic()">Add Component</button>
<ng-container formArrayName="articulos">
<div *ngFor="let art of artarray.controls; let i = index">
<ng-container [formGroupName]="i">
<div class="sf_ctart">
<div [attr.for]="'art' + i">{{art.value.id}}</div>
<div>{{art.value.nart}}</div>
<input type="text" formControlName='am'>
<button (click)="eraseArt(i)">Delete</button>
</div>
</ng-container>
</div>
</ng-container>
</div>
This is my TypeScript code:
secondFormGroup = this._formBuilder.group({
articulos: this._formBuilder.array([
{
id:"1",
nart: "T",
am: 0,
},
{
id:"2",
nart: "T",
am: 1,
},
{
id:"3",
nart: "M",
am: 0,
},
]),
});
public get artarray(): FormArray {
return this.secondFormGroup.get('articulos') as FormArray
}
I'm struggling to figure out the issue, any help would be greatly appreciated :)