Expected behavior

See below

Actual behavior

See below

Resources (screenshots, code snippets etc.)

I am currently working on creating a set of input components based on MDB5 Angular. I have created a reusable field component that is a parent of specific input components.

Here is the template for the field:

<mdb-form-control>
  <ng-content></ng-content>
  <label mdbLabel *ngIf="label" class="form-label" [class.text-danger]="error" [for]="id"
  >{{ label }}<span *ngIf="required" class="required">
      <sup><i class="fa-solid fa-asterisk text-danger"></i></sup></span
  ></label>
  <mdb-error *ngIf="error">{{ errorMessage }}</mdb-error>
  <mdb-success *ngIf="success">{{ successMessage }}</mdb-success>
  <small *ngIf="helpText" class="help-message">{{ helpText }}</small>
</mdb-form-control>

Here is the template for the input:

<mjn-field
      [id]="id"
      [required]="required"
      [label]="label"
      [helpText]="helpText"
      [shortErrorMessage]="shortErrorMessage">
      <ng-container [formGroup]="formGroup">
        <input
          [type]="type"
          [readonly]="readonly"
          class="form-control {{ extraClasses }}"
          [id]="id"
          [formControlName]="name"
          mdbInput
          mdbValidate
          [required]="required"/>
      </ng-container>
      <ng-content></ng-content>
    </mjn-field>

For some reason the MdbFormControlComponent does not set the _formControl variable correctly. I am assuming that @ContentChild is not getting set because my input is not a child of my field component but in order to avoid a bunch of duplicate code the field wrapper needs to be separated from the input element.

Is there a way around this behavior? Is there a way to manually set the _formControl variable or update @ContentChild to see the children in ?

Thanks! Steve