实现 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

实现 ControlValueAccessor 但它不会将值传播到表单

Implementing a ControlValueAccessor but it's not propagating the value to the form

typescript

flatpickr

angular