CODEWITHSUNDEEP
angulartypescriptangular-reactive-formsangular-formsangular-formbuilder
NeonH
NeonH

Reputation: 75

Cannot read properties of null (reading 'controls') in Nested Form of Angular Form

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',
      },
    ],
  };

Error in console

I created a Stackblitz for the same please help me for solving this error

StackBlitz link

Upvotes: 0

Views: 993

Answers (1)

Eliseo
Eliseo

Reputation: 57919

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>

Upvotes: 1

Related Questions