Currently, I am experimenting with reactive forms in Angular, and I'm encountering difficulties with updating the form from custom components.
As an example, take a look at the date-input component created using flatpickr in the linked Plunker demo.
https://plnkr.co/edit/okIjPb6aUcrzx3t7edae?p=info
In particular, observe this code snippet where setting the date property should trigger changes in the outer form, but it doesn't update as expected:
ngOnInit() {
this.instance = flatpickr(this.elDate.nativeElement, {
onChange: (selectedDates, dateStr, instance) => {
this.date = selectedDates[0];
}
});
}
set date(val) {
this._date = val;
this.propagateChange(val);
}
The Plunker also includes a counter-input example that utilizes native Angular events and functions flawlessly.
On the other hand, the date-input relies on custom events which seems to be causing the issue.
I initially thought applying something similar to Angularjs's applyAsync might resolve the issue. However, since Angular employs zones for handling such scenarios, there appears to be some confusion on my end. I seek clarity on this matter.