实现 ControlValueAccessor 但它没有将值传播到表单

Question

我正在使用 Angular 上的响应式表单，但在将更改从自定义组件传播到表单时遇到了麻烦。

例如，您可以在 plunkr 中看到一个使用 flatpickr 制作的日期输入组件。

https://plnkr.co/edit/okIjPb6aUcrzx3t7edae?p=info

你可以特别看到这段代码，当它设置属性 date 时，它应该将更改传播到外面的表单，但是不，表单没有被更新。

ngOnInit() {
 this.instance = flatpickr(this.elDate.nativeElement, {
   onChange: (selectedDates, dateStr, instance) => {
     this.date = selectedDates[0];
   }
 });
}
set date(val) {
    this._date = val;
    this.propagateChange(val);
}

plunkr 中还有一个反输入示例，它适用于 Angular 原生事件，并且可以完美运行。

但是在使用自定义事件的日期输入中（我认为）它不起作用。

我认为解决方案类似于旧 Angularjs 中的旧 applyAsync，但 Angular 承诺通过使用区域来解决这些问题，所以我不清楚。我想对这个问题有所启发。

Answer 1

您忘记将控件绑定到您的FormGroup：

<date-input [date]="date" formControlName="date"></date-input>
                          ^^^^^^^^^^^^^^^^^^^
                              add this

Forked Plunker