host-control.directive.ts

@Directive({
  standalone: true,
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      multi: true,
      useExisting: HostControlDirective,
    },
  ],
})
export class HostControlDirective implements ControlValueAccessor {

  control!: FormControl;

  private injector = inject(Injector);
  private subscription?: Subscription;

  ngOnInit(): void {

    const ngControl = this.injector.get(NgControl, null, { self: true, optional: true });

    if (ngControl instanceof FormControlName) {
      const group = this.injector.get(ControlContainer).control as UntypedFormGroup;
      this.control = group.controls[ngControl.name!] as FormControl;
      return;
    }

    if (ngControl instanceof FormControlDirective) {
      this.control = ngControl.control;
      return;
    }

    if (ngControl instanceof NgModel) {
      this.subscription = ngControl.control.valueChanges.subscribe(newValue => {
        // The viewToModelUpdate updates the directive and triggers the ngModelChange.
        // So we want to called it when the value changes except when it comes from the parent (ngModel input).
        // The `if` checks if the newValue is different from the value on the ngModel input or from the current value.
        if (ngControl.model !== newValue || ngControl.viewModel !== newValue) {
          ngControl.viewToModelUpdate(newValue);
        }
      });
      this.control = ngControl.control;
      return;
    }

    // Fallback
    this.control = new FormControl();
  }

  writeValue(): void { }
  registerOnChange(): void { }
  registerOnTouched(): void { }

  ngOnDestroy(): void {
    this.subscription?.unsubscribe();
  }
}


// Usage example
@Component({
  selector: 'app-custom-input',
  template: `<input [formControl]="hcd.control" />`,
  standalone: true,
  imports: [ReactiveFormsModule],
  hostDirectives: [HostControlDirective],
})
export class CustomInputComponent {
  hcd = inject(HostControlDirective);
}

Hi @cyrillbrito when I change the reference of a form group the formcontrols dosent update the reference

Do you have the working example? With an example usage? Thanks in advance!

of course @vivekraj-kr as you can see in the image when I use the control with Control, it always binds me to the reference of the first form:

https://stackblitz.com/edit/stackblitz-starters-syppdkqc?file=src%2Fapp%2Fcustom-input-hostcontrol.component.ts