Angular Recursive & Nested Reactive Form Always Valid, Even When It's Not

Question

I am building a recursive Reactive Form Using Angular. STACKBLITZ HERE

The form works great as expected. However, since I am building this recursively/dynamically, where the user can build and nest FormArrays and FormGroups infinitely, I am using child components. So far there are 3 main components:

1. AppComponent: The main Parent Component
2. GroupControlComponent: The child of the parent. Takes care of all the group objects
3. ConditionFormComponent: The child of the GroupControlComponent. Takes care of all the conditions within the groups

This is what a basic object looks like:

{
  // appcomponent level
  "statement": {
    //groupcontrol level
    "groups": [
      {
        // conditionform level
        "conjunctor": null,
        "conditions": [
          {
            "variable": null
          }
        ],
        "groups": []
      }
    ]
  }
}

When I set up validation, I want everything to be required. So I went through the FormBuilder, on the parent and children components, and set Validators.required to true on all form controls.

After going through, I went back and built a form using this approach, and the form returns true always, even when it is not. Is there a way to find if the children are valid on a dynamically created form with child components?

If you'd like to read a little bit more about this specific scenario, here are some other StackOverflow issues going over building and getting the form to work recursively:

Cannot Find Control with Path Using ngIf on Recursive Angular Form

Angular Deeply Nested Reactive Form: Cannot find control with path on nested FormArray

Answer 1

You has no a "recursive Angular Form" your component group-component is a custom form control, so you really your _form is a formGroup with a formGroup with a FormArray of formControls -not a formArray with FormGroups-

Yes, the formControls in the array store objects, but only this. If you want check change the function _addGroup by

 _addGroup() {
    this._groupsFormArray.push(
      this.fb.control('')
    );
  }

you'll see that all is as before.

Re-think your app-group-control to make a simple component that received as @Input the own FormGroup of the array, some like

@Input() formGroup:FormGroup

And in parent:

<ng-container *ngFor="let group of _groupsFormArray?.controls; index as i">
        <app-group-control 
            [formGroup]="_groupsFormArray.at(i)"
        </app-group-control>
</ng-container>