angular - ControlValueAccessor: registerOnChange() kallas aldrig

Jag bygger en Angular 7-app som använder ControlValueAccessor-gränssnittet för att få min kontroll att fungera bra med Reactive Forms. Tyvärr blir registerOnChange() aldrig kallad, så jag kan inte 'övervaka' värdet på min kontroll.

Den relevanta källan till min kontroll ser ut så här:

@Component({
  selector: 'wp-date-picker',
  templateUrl: './date-picker.component.html',
  styleUrls: [ './date-picker.component.scss' ],
  providers: [
    {
      provide: NG_VALUE_ACCESSOR,
      useExisting: forwardRef(() => DatePickerComponent),
      multi: true
    }
  ]
})
export class DatePickerComponent implements OnInit, ControlValueAccessor {
  onChange = (date: Date) => {};
  onTouched = () => {};

  writeValue(date: Date): void {
    if (date) {
      date = new Date(date);
      this.day = date.getDate();
      this.month = date.getMonth();
      this.year = date.getFullYear();
    }
  }

  get value(): Date {
    return new Date(Date.UTC(this.year, this.month, this.day));
  }

  registerOnChange(fn: (date: Date) => void): void {
    // never being called
    this.onChange = fn;
  }
}

och den innehållande komponenten ser ut så här:

@Component({
  selector: 'wp-retirement-age',
  templateUrl: './retirement-age.component.html',
  styleUrls: [ './retirement-age.component.scss' ]
})
export class RetirementAgeComponent implements OnInit {
  form: FormGroup;

  constructor(private fb: FormBuilder) {
  }

  ngOnInit() {
    this.form = this.fb.group({
      retirementDate: [ this.product.retirementDate ],
      retirementAge: [ this.product.retirementDate ]
    });

    this.retirementDateCtrl.registerOnChange((newValue) => {
      this.retirementAgeCtrl.setValue(newValue);
    });

    this.retirementAgeCtrl.registerOnChange((newValue) => {
      this.retirementDateCtrl.setValue(newValue);
    });
  }

  get retirementDateCtrl() {
    return this.form.get('retirementDate') as FormControl;
  }

  get retirementAgeCtrl() {
    return this.form.get('retirementAge') as FormControl;
  }
}

Min komponent har den här HTML:

<form class="retirement-age-form" [formGroup]="form">
  <div class="row">
    <div class="col-3 col-md-4 col-lg-3">
      <div [innerHtml]="content?.wantToRetire" class="options-title"></div>
    </div>
    <div class="col-3 col-md-4 col-lg-6">
      <wp-date-picker
        [maxDate]="maxDate"
        [minDate]="minDate"
        formControlName="retirementDate"
      ></wp-date-picker>
    </div>
  </div>
</form>

Varken this.retirementDateCtrl.registerOnChange() eller this.retirementAgeCtrl.registerOnChange() når faktiskt kontrollens registerOnChange()-metod, så callbacks körs aldrig. Vad missar jag?