title: ControlValueAccessor: registerOnChange() is never called
body: <p>I am building an Angular 7 app that uses the <code>ControlValueAccessor</code> interface to make my control play well with Reactive Forms. Unfortunately, the <code>registerOnChange()</code> is never being called, so I cannot 'watch' my control's value.</p>
  
  <p>The relevant source of my control looks like this:</p>
  
  <pre><code>@Component({
    selector: 'wp-date-picker',
    templateUrl: './date-picker.component.html',
    styleUrls: [ './date-picker.component.scss' ],
    providers: [
      {
        provide: NG_VALUE_ACCESSOR,
        useExisting: forwardRef(() =&gt; DatePickerComponent),
        multi: true
      }
    ]
  })
  export class DatePickerComponent implements OnInit, ControlValueAccessor {
    onChange = (date: Date) =&gt; {};
    onTouched = () =&gt; {};
  
    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) =&gt; void): void {
      // never being called
      this.onChange = fn;
    }
  }
  </code></pre>
  
  <p>and the containing component looks like this:</p>
  
  <pre><code>@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) =&gt; {
        this.retirementAgeCtrl.setValue(newValue);
      });
  
      this.retirementAgeCtrl.registerOnChange((newValue) =&gt; {
        this.retirementDateCtrl.setValue(newValue);
      });
    }
  
    get retirementDateCtrl() {
      return this.form.get('retirementDate') as FormControl;
    }
  
    get retirementAgeCtrl() {
      return this.form.get('retirementAge') as FormControl;
    }
  }
  </code></pre>
  
  <p>My component has this HTML:</p>
  
  <pre><code>&lt;form class="retirement-age-form" [formGroup]="form"&gt;
    &lt;div class="row"&gt;
      &lt;div class="col-3 col-md-4 col-lg-3"&gt;
        &lt;div [innerHtml]="content?.wantToRetire" class="options-title"&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="col-3 col-md-4 col-lg-6"&gt;
        &lt;wp-date-picker
          [maxDate]="maxDate"
          [minDate]="minDate"
          formControlName="retirementDate"
        &gt;&lt;/wp-date-picker&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <p>Neither the <code>this.retirementDateCtrl.registerOnChange()</code> nor the <code>this.retirementAgeCtrl.registerOnChange()</code> are actually reaching the control's <code>registerOnChange()</code> method, so the callbacks are never being executed. What am I missing?</p>