Angular nested form inside form or group

Question

I have several forms that share commons parts. I've put those common parts in components and used 'viewProviders' to access the parent form:

@Component({
  selector: 'sub-form',
  ...
  viewProviders: [ { provide: ControlContainer, useExisting: NgModelGroup} ]
})

The problem is that I need to use the component both insinde a group and directly inside the form, like in the following examples:

<form>
  ...
  <div ngModelGroup="my-group">
    <sub-form></sub-form>
  </div>
  ...
</form>

<form>
  ...
    <sub-form></sub-form>
  ...
</form>

Unfortunately by using 'useExisting: NgModelGroup', this works only in the first case, while using 'useExisting: NgForm' it always bind itself to the main form, ignoring the group. I tried to use 'useExising: ControlContainer' since both NgForm and NgModelGroup extend this class, but I get a cyclic dependency error (as expected).

Do I need to create two distinct components or is there a way to make this work on both cases?