angular - ControlValueAccessor：永远不会调用 registerOnChange()

Question

我正在构建一个 Angular 7 应用程序，该应用程序使用该ControlValueAccessor界面使我的控件与 Reactive Forms 配合得很好。不幸的registerOnChange()是，从未调用过，所以我无法“观察”我的控件的值。

我的控件的相关来源如下所示：

@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;
  }
}

并且包含的​​组件如下所示：

@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;
  }
}

我的组件有这个 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>

thethis.retirementDateCtrl.registerOnChange()和 thethis.retirementAgeCtrl.registerOnChange()都没有真正到达控件的registerOnChange()方法，所以回调永远不会被执行。我错过了什么？

标签： angulartypescript