I'm new to angular. Working on creating nested form in angular where I'm facing difficulties for getting controls of some fields based on the JSON structure shown below where I'm facing difficulties in getting control assetsList -> description section
data = {
headline: [
{
language: 'en',
headlineText: 'example headline',
},
],
bodyText: [
{
language: 'en',
bodyText: 'example bodytext',
},
],
location: {
name: 'mkontheway',
openingHours: [
{
day: 'Mon-frd',
timing: '10.00PM-9AM',
},
],
address: {
postCode: 'test',
country: 'test',
},
},
assetsList: [
{
description: [
{
language: 'En',
text: 'Sports News Updated',
},
],
assetType: 'Description',
assetLink: 'NewsLink',
filePath: 'Not yet fill',
},
],
};
I created a Stackblitz for the same please help me for solving this error
assetsListDescriptionFormData can not be a getter because you need indicate the "index" of the assetsList -you has a FormArray inside another FormArray- else a function that you pass an index
getAssetsListDescriptionFormData(index:number) {
return <FormArray>this.assetsListFormData.at(index).get('description');
}
And use
<div formArrayName="description" style="position: relative;">
<div *ngFor="let description of
getAssetsListDescriptionFormData(assetsListGroup).controls;
let assetsListDescriptionGroup=index">
<div class="form-fields-wrapper" [formGroupName]="assetsListDescriptionGroup">
...
</div>
</div>
</div>