example-9.ts

@Directive({
  selector: '[myFormControl]',
})
export class MyFormControlDirective {
  @Input('myFormControl') providedControl!: FormControl;

  control = new FormControl('');

  private changesSubscriptions: Subscription[] = [];
  private subscriptions: Subscription[] = [];

  constructor(
    @Inject(NG_CONTROL_ACCESSOR)
    private accessor: ControlAccessor,
  ) {
    // Sync this directive's control with the ControlAccessor's control
    this.subscriptions.push(
      concat(
        this.accessor.replayState(),
        this.accessor.events,
      ).subscribe(this.control.source),
      this.control.events.subscribe(this.accessor.source),
    );
  }

  ngOnChanges(changes: { providedControl: SimpleChange }) {
    this.control.source.next({
      source: this.control.id,
      processed: [],
      type: 'ControlAccessor',
      label: 'PreCleanup',
    });

    this.changesSubscriptions.forEach(sub => sub.unsubscribe());
    this.changesSubscriptions = [];

    this.control.source.next({
      source: this.control.id,
      processed: [],
      type: 'ControlAccessor',
      label: 'PreInit',
    });

    // Sync/Link the providedControl with this directive's control. As a reminder,
    // this directive's control is already linked with the ControlAccessor (meaning
    // that the providedControl will be linked with the ControlAccessor).
    this.changesSubscriptions.push(
      concat(
        this.providedControl.replayState(),
        this.providedControl.events,
      ).subscribe(this.control.source)
      this.control.events.subscribe(this.providedControl.source),
    );

    this.control.source.next({
      source: this.control.id,
      processed: [],
      type: 'ControlAccessor',
      label: 'PostInit',
    });
  }

  ngOnDestroy() {
    this.changesSubscriptions.forEach(sub => sub.unsubscribe());
    this.subscriptions.forEach(sub => sub.unsubscribe());
  }
}