An error occurs when trying to access the 'controls' property within the nested form of an Angular form as it is null

Question

An error occurs when trying to access the 'controls' property within the nested form of an Angular form as it is null

Just getting started with angular and tackling the challenge of creating a nested form. I'm struggling to access controls for certain fields based on the JSON structure provided below, specifically having trouble with the 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',
      },
    ],
  };

https://i.sstatic.net/zSkfO.png

I have created a Stackblitz showcasing the issue. Any help in resolving this error would be greatly appreciated!

Check out the StackBlitz

angular typescript angular-reactive-forms angular-forms angular-formbuilder

Answer 1

Answer №1

The assetsListDescriptionFormData cannot serve as a getter because you must specify the "index" of the assetsList -since it is a FormArray within another FormArray- or create a function that takes an index parameter.

getAssetsListDescriptionFormData(index:number) {
    return <FormArray>this.assetsListFormData.at(index).get('description');
}

To implement this, use the following:

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

Answer 2

The assetsListDescriptionFormData cannot serve as a getter because you must specify the "index" of the assetsList -since it is a FormArray within another FormArray- or create a function that takes an index parameter.

getAssetsListDescriptionFormData(index:number) {
    return <FormArray>this.assetsListFormData.at(index).get('description');
}

To implement this, use the following:

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

An error occurs when trying to access the 'controls' property within the nested form of an Angular form as it is null

Answer №1

Similar questions

Combine Two Values within Model for Dropdown Menu

The value is not being found in my form, and the slide-toggle is consistently checked

Using ScaleTime on the X axis with d3 v4 in TypeScript for Angular2 on DefinitelyTyped

Deleting a property once the page has finished loading

We are currently unable to identify the specific web framework being used. For further details, please refer to the firebase-debug

Tips for performing a cast when initializing a new object using TypeScript

What is the best way to eliminate duplicate files from an Angular input file?

Issue with ngClass not updating during Route Event

Angular 8 form controls becoming unresponsive while the list is being loaded

What is the process for transferring an existing collection or data in Firestore to a subcollection?

Prevent Angular Material Autocomplete from automatically updating the input field

Can I modify the cookie domain for NestJS SessionModule on a per-request basis?

Using StencilJS to Incorporate CSS/SASS Styles from node_modules

Angular's conditional statement for handling three different cases

What is the best way to make Angular Material Fields fill 100% of the container width?

How to dynamically assign a value in a React datepicker component in a React application

Detecting Changes in Angular Only Works Once when Dealing with File Input Fields

Exploring the canDeactivateFn syntax with Angular Documentation

Tips on sorting an array within a map function

Issues with FormArrays containing nested FormGroups