angulartypescriptangular-reactive-formsangular-formsangular-formbuilder

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


Solution

  • 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>