Angular. Error Cannot read properties of null (reading 'addFormGroup')-CodePudding

I have a component with a form:

<form [formGroup]="Nsfg.invoiceFormGroup">
   <div formGroupName="namespace">
      <div  id="accordionTrikititta">
         <newFacturaE></newFacturaE>
                  
         <fileHeaderComponent [invoiceFormGroup]="Nsfg.invoiceFormGroup">
         </fileHeaderComponent>
         ...

As my form grows I need to split it in different components: First one 'fileHeaderComponent'

In my child component I have in the Html:

<div formGroupName="FileHeader">             
             <div >
 ....

then I receive an error:

ERROR TypeError: Cannot read properties of null (reading 'addFormGroup')

And debugging it's happening because there is no parent found for the elements... where it should find the parent form it's null.

I've been trying some solutions found here (with no luck):

https://stackblitz.com/edit/angular-2b3zcz?file=src/app/address/address.component.html



https://stackblitz.com/edit/angular-ewdzmp?file=src/app/component/family/family.component.ts

CodePudding user response：

Thanks to Jai Saravanan!

In my case I've fixed it this way:

parent html (referring child):

<form [formGroup]="Nsfg.invoiceFormGroup">
   <div formGroupName="namespace">
     <fileHeaderComponent formGroupName="FileHeader"></fileHeaderComponent>

html child:

<div [formGroup]="fileHeaderFormGroup">

ts child:

export class FileHeaderComponent implements OnInit {      
  @Input() formGroupName: string;

ngOnInit(): void {
    this.fileHeaderFormGroup = NsGet.fileHeader as FormGroup;
  }

NsGet is equal to

 Nsfg.invoiceFormGroup.get('namespace').get('FileHeader');

CodePudding user response：

You can refer to the below link for reactive form in the parent-child component in detail.

https://blog.profanis.me/blog/reactive-forms-in-parent-child-components