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

StackBlitz link

CodePudding user response：

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  [formGroupName]="assetsListDescriptionGroup">
              ...
      </div>
   </div>
</div>