I recently completed a tutorial on reactive forms in Angular from . I followed the steps to create a nested form, similar to what was shown in the video. However, I am facing an issue with generating a formarray upon button click. Despite no errors being displayed, the inputs are not showing up as expected. I have compared my code multiple times with the tutorial and everything seems identical. Can someone take a look and point out where I might be going wrong?
Here is a snippet of the TypeScript code used to generate the form:
ngOnInit() {
this.materialAddForm = this.fb.group({
article_seller_id: '',
informationNote: '',
buildMaterial_sellers: this.fb.array([
]),
materialCode: '',
materialName: '',
materialType: '',
material_image_url: '',
material_prices: '',
quantity: '',
}
)
}
get sellerForm(){
return this.materialAddForm.get('buildMaterial_sellers') as FormArray
}
addSellerForm(){
const sellerForm = this.fb.group({
name: []
})
this.sellerForm.push(sellerForm)
}
Below is the HTML code that generates the dynamic form:
<div class="-pull-right">
<button type="button" (click)="addSellerForm()" class="btn btn-primary mb-2">Add Seller</button>
</div>
<div formArrayName="buildMaterial_sellers">
<div *ngFor="let seller of sellerForm.controls let i=index" [formGroupName]="i">
<div class="input-group input-group-sm col-12 col-md-6 mb-4">
<div class="input-group-prepend">
<span class="input-group-text" id="name">Seller Name</span>
</div>
<input type="text" class="form-control" aria-label="Sizing example input"
aria-describedby="inputGroup-sizing-sm"
formControlName="name" >
</div>
</div>
</div>