[SOLVED] I'm wondering if ngTemplateOutletInjector can be used to make NgModel work in an embedded template wrapped by a form: what does NgModel require?

I'm wondering if ngTemplateOutletInjector can be used to make NgModel work in an embedded template wrapped by a form: what does NgModel require?

As of angular 14 the ngTemplateOutlet directive has a new parameter: ngTemplateOutletInjector, which according to the angular docs, defines an "injector to be used within the embedded view."

Since hierarchical injection was the roadblock to wrapping template outlets in forms like this:

<form #form="ngForm">
    <ng-container *ngTemplateOutlet="tRef"></ng-container>
</form>

... it seems like this might be overcome by using a custom injector to provide whatever an NgModel instance needs to integrate with the form. But, if possible, you would need to know exactly what to provide in said injector.

These are the NgModel dependencies:

  @Optional() @Host() parent: ControlContainer,
  @Optional() @Self() @Inject(NG_VALIDATORS) validators: (Validator|ValidatorFn)[],
  @Optional() @Self() @Inject(NG_ASYNC_VALIDATORS) asyncValidators:
      (AsyncValidator|AsyncValidatorFn)[],
  @Optional() @Self() @Inject(NG_VALUE_ACCESSOR) valueAccessors: ControlValueAccessor[],
  @Optional() @Inject(ChangeDetectorRef) private _changeDetectorRef?: ChangeDetectorRef|null)

Can anyone shed light on what would be required here?

Solution

An NgForm instance must be provided as its base type, ControlContainer to be accessible to an NgModel instance.

In the code I am currently working on, this worked (implementation may vary):

let injector = Injector.create({
  providers: [
    {
      provide: ControlContainer,
      useFactory: () => component.form
    }
  ]      
});