Create a generic reactiveForm - dynamic components

I have a project in Angular and angular material in which I am trying to create generic components to avoid repeating them in all components.

Now I'm creating a component with a form, but I'm having trouble passing fields to it from another component.

I'm following this Angular guide but I don't understand how to adapt it to the component I currently have: https://angular.io/guide/dynamic-form

This is the form component, form.component.html, it is the view of the form that will be imported into the rest of the components:

<form  [formGroup]="formName">
  <mat-grid-list [cols]="cols" rowHeight="60px" fxLayoutGap="10px">
    <mat-grid-tile *ngFor="let field of fields" [colspan]="field.cols">
      <mat-form-field>
        <input matInput [placeholder]="field.name" [formControlName]="field.columnDef">
        <mat-icon matSuffix *ngIf="field.icon">{{ field.icon }}</mat-icon>
      </mat-form-field>
    </mat-grid-tile>
  </mat-grid-list>
</form>

This is the form.component.ts, currently I get four variables (formName, cols, fields, buttons), I'm getting the fields object fine, but my problem: I can't build the form from the fields object:

export class FormAddComponent implements OnInit {

  @Input('formName') public formName: FormGroup;
  @Input('cols') public cols: number;
  @Input('fields') public fields: Fields[];
  @Input('buttons') public button: Buttons[];

  constructor(
  ) { }

  ngOnInit(): void {
  }
}

This is the component from which the form is called, test.component.html:

<app-form-add [formName]="formClient" [cols]="4" [fields]="fields" [buttons]="buttons"></app-form-add>

These are the fields and buttons objects, test.component.ts:

export class TestComponent {

public formTest: FormGroup;
    
      constructor(
      ) { }

ngOnInit(): void {
    this.dataCars = [
      { id: '01', model: 'BMW' },
      { id: '01', model: 'BMW' },
      { id: '01', model: 'BMW' },
    ];

    this.formTest = this.fb.group({
      name: [],
      lastName: [],
      phone: [],
      email: [],
      car: []
    });
  }

  public fields: Fields[] = [
            { name: "Nombre cliente", columnDef: "name", icon: "person_outline", cols: 1 },
            { name: "Apellidos", columnDef: "lastName", icon: "", cols: 1, valueList: false },
            { name: "Telefono", columnDef: "phone", icon: "", cols: 1, valueList: false },
            { name: "Email", columnDef: "email", icon: "", cols: 1, valueList: false },
            { name: "Car", columnDef: "car", icon: "", cols: 1, valueList: true, nameList: this.dataCars }
          ];
    
   public buttons: Buttons[] = [
        { name: "ADD", icon: "", action: null }
      ];
    
    }

UPDATE: I am trying to add a select field to the form, I have added a boolean to identify if the field is a list and another property indicating the list.

Problem: This causes the following error: Property 'dataCars' is used before its initialization

I am creating the array of objects in the ngOnInit first before using it, I don't know why this happens

Test example on Stackblitz: https://stackblitz.com/edit/angular-ivy-iyhuau?file=src%2Fapp%2Fform%2Fform.component.html,src%2Fapp%2Fform%2Fform.component.ts,src%2Fapp%2Ftest%2Ftest.component.html,src%2Fapp%2Ftest%2Ftest.component.ts