formGroup expects a FormGroup instance, dynamic form

I'm making a dynamic form using this guide but I'm a little bit confused, the form is in a dialog made with angular materials.

modal-admin-cops.component.html

<!-- language: lang-html -->

<h2 mat-dialog-title>Title</h2>
<mat-dialog-content [formGroup]="formGroup">
        <ng-container class="form-row" *ngFor="let item of intData">
            <app-input-field [formGroup]="formGroup"
                            [data]="item.data" 
                            [controlName]="item.controlName" 
                            [placeHolder]="item.placeHolder" 
                            *ngIf="item.input==='inputField'">
            </app-input-field>
            <!--
            <app-file-field [form]="form"
                        [data]="item" 
                        [controlName]="item.controlName" 
                        [placeHolder]="item.placeHolder" 
                        *ngIf="item.input==='fileField'">

            </app-file-field>
            <app-select-field [form]="form"
                            [data]="item" 
                            [controlName]="item.controlName" 
                            [placeHolder]="item.placeHolder" 
                            *ngIf="item.input==='selectField'">
            </app-select-field>
            -->
        </ng-container>
</mat-dialog-content>
<mat-dialog-actions>
    <button class="mat-raised-button mat-primary" [mat-dialog-close]="data" (click)="save()">Publish</button>
</mat-dialog-actions>

modal-admin-cops.component.ts

<!-- language: lang-ts -->

@Component({
  selector: 'app-modal-admin-cops',
  templateUrl: './modal-admin-cops.component.html',
  styleUrls: ['./modal-admin-cops.component.css']
})
export class ModalAdminCopsComponent implements AfterViewInit {
  private controllerNames:string[]=[];
  private intData;
  private formGroup:FormGroup;
  
  constructor(
    private renderer:Renderer2,
    private http:HttpClient,
    private formBuilder: FormBuilder,
    private dialogRef:MatDialogRef<ModalAdminCopsComponent>,
    @Inject(MAT_DIALOG_DATA) public data:any[]) 
    {
      this.intData=data;
      this.cargar();
    }
  cargar(){
    this.intData.forEach(x=>{
      console.log(x.data);
      if(x.input==="inputField"){
        this.controllerNames.push(x.controlName);
      }
    });
    
    console.log(this.controllerNames);
  }
  ngAfterViewInit(){
    console.log("llega");
    this.formGroup=this.toFormGroup();
    console.log(this.formGroup);
  }
  toFormGroup():FormGroup{
    let group:any;
    this.controllerNames.forEach(x=>{
      group[x]=new FormControl();
    });
    return new FormGroup(group);
  }
  save(){
    location.reload();
  }
}

The @Inject(MAT_DIALOG_DATA) public data:any[]) receives something like this:

<!-- language: lang-ts -->

[{
   input:"inputField",
   controlName:"nombre",
   placeHolder:"Escribe el nombre de la cop",
   data:{
     cod:here goes a number,
     desc:Here goes a string
  }
}]

Sometimes data maybe an array of {cod,desc}

input-field.component.html

<!-- language: lang-html -->

<div [formGroup]="formGroup">
        <mat-form-field #input class="expand" [class]="placeHolder">
                <input matInput
                        [(value)]="data.desc"
                        [placeholder]='placeHolder' 
                        [formControlName]='controlName'>
        </mat-form-field>
</div>

input-field.component.ts

<!-- language: lang-ts -->

@Component({
  selector: 'app-input-field',
  templateUrl: './input-field.component.html',
  styleUrls: ['./input-field.component.css']
})
export class InputFieldComponent implements AfterViewInit {
  @Input() formGroup:FormGroup;
  @Input() data:any;
  @Input() controlName:string;
  @Input() placeHolder:string;
  
  constructor() {
    
  }
  
}

When I click a button that start the dialog I get this:

ModalAdminCopsComponent.html:2 ERROR Error: formGroup expects a FormGroup instance. Please pass one in.
InputFieldComponent.html:1 ERROR Error: formGroup expects a FormGroup instance. Please pass one in.

What I am trying to do is to create the form dynamically with different types of inputs.

Edit1:
If i used:

<!-- language: lang-ts -->

ngOnInit(){
  this.formGroup=this.toFormGroup();
  console.log(this.formGroup);
}

I get:

formGroup expects a FormGroup instance. Please pass one in.

If I used:

<!-- language: lang-ts -->

ngAfterViewInit(){
  this.formGroup=this.toFormGroup();
  console.log(this.formGroup);
}

i get:

Cannot read property 'get' of undefined
Cannot set property 'nombre' of undefined

Initialize your formGroup in the constructor or in ngInit

this.formGroup = this.formBuilder.group({
  name: new FormControl('')
});

Finally a get a way to add the controllers:
I put this in the input.component.ts

<!-- language: lang-ts -->

ngOnInit(){
  this.formGroup.controls[this.controlName]=new FormControl();
}

That seems to add to the formGroup.