How to markAllAsTouched on nested forms triggered from parent form?

Question

I have a recursive nested custom form that can be dynamically added to a parent form implemented using controlValueAccessor. When I click the submit button on the parent form, I'd like for all the controls in the nested forms to be marked as touched and show validation errors if any. Using this.form.markAsAllTouched() in the parent form obviously doesn't propagate to the nested forms.

How can I achieve this by editing just the custom form? I have tried using ngDoCheck() in the custom form as below and it seems to apply touched to any new forms I add but not existing ones, which is the opposite of what I want (new forms should not be added with validation errors).

 ngDoCheck() {
    if (this.form.touched) {
      return;
    }

    // get the parent formArray
    const formArray = this.injector.get(FormArrayName).control;

    if (formArray?.touched) {
      this.form.markAllAsTouched();
    }
  }

Here's my stackblitz example.