Angular。 错误无法读取 null 的属性（读取“addFormGroup”）

Question

I have a component with a form:

<form [formGroup]="Nsfg.invoiceFormGroup">
   <div formGroupName="namespace">
      <div class="accordion" 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 class="form-inline">
 ....

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%2Fapp%2Faddress%2Faddress.component.html



https://stackblitz.com/edit/angular-ewdzmp?file=src%2Fapp%2Fcomponent%2Ffamily%2Ffamily.component.ts

Answer 1

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');

Answer 2

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