Recursive Component of Dynamic Angular Forms - ERROR Error: Cannot find control with name:

As you can see in the displayed view, all the FormControl are there. But, when a click event is presented. I show the all FormControl's of my Form in that istant with the line: console.log(this.form.value);

As you can see in the Green bottom right rectangle in. In the last Event. Only appears two controls!!!!, But are shown 7 formControls without button!... Then my Form (variable this.form) need to add those FormControl's.

How to do that?

First, I need to obtain the main Form and FormGroup (of my parent Component).

In my parent component (JsonFormComponent) from the json-form.component.ts file:

export class JsonFormComponent implements OnChanges {
  @Input() jsonFormData: JsonFormData;

  public myForm: FormGroup = this.fb.group({});
  public myFormBuilder: FormBuilder;

  constructor(private fb: FormBuilder) {
    this.myFormBuilder = fb;
  }

Now, I have public myForm: FormGroup... and public myFormBuilder: FormBuilder; for my parent Component!.

The next step, is create local variable in each child-component located in the selects.component.ts file.

export class SelectsComponent implements OnInit {
  public form: FormGroup;
  @Input() formBuilder: FormBuilder;

  constructor(private rootFormGroup: FormGroupDirective) {}

  ngOnInit(): void {
    this.form = this.rootFormGroup.form;
  }

Now, I have public form: FormGroup... and @Input() formBuilder: FormBuilder; for my child Component!.

The next step, is to pass that objects to my child-components:

The solution in order to pass (or relate) myForm (FormGroup) comes from this post. But, the relation for myFormBuilder is done in the json-form.component.html file.

    <selects
      *ngIf="control.type === 'select'"
      [control]="control"
      [visible]="true"
      (addControl)="onAddControl($event)"
      [formBuilder]="myFormBuilder"
    ></selects>

Specifically in the line: [formBuilder]="myFormBuilder".

And for the recursion, in the selects.component.html file

  <ng-container *ngFor="let child of control?.children">
    <div fxFlex="100%">
      <selects
        *ngIf="child.type === 'select'"
        [control]="child"
        [formBuilder]="formBuilder"
      ></selects>
    </div>
  </ng-container>

Specifically in the line: [formBuilder]="formBuilder".

Now, in my child-component in the file selects.component.ts I created this method:

  private newControl(control: JsonFormControls) {
    this.form.addControl(
      control.name,
      this.formBuilder.control(control.value, getValidators(control))
    );
    control.visible = true;
  }

Lastly: I changed my method, in order to add the FormControl that needs to be displayed:

  public onSelectChange(event: MatSelectChange) {
    console.log(this.form.value);
    this.control.value = event + '';
    if (this.control.children) {
      this.recursiveConcealer(this.control.children);
      const child = this.control.children.find(
        (child) => child.value === event + ''
      );
      this.newControl(child);
      if (child.siblings) {
        for (let sibling of child.siblings) {
          this.newControl(sibling);
        }
      }
    }
  }

Note specifically the lines: this.newControl(child); and this.newControl(sibling);.

As you can see in the Blue rectangle, the errors are gone.

NOTE: Theres is not the only one solution, here a question How can I pass the FormGroup of a parent component to its child component using the current Form API about this subject.