ngx cron editor not patching value on edit mode in angular12

I am using Angular 12 with the package ngx-cron-editor@0.7.0. The cron editor renders correctly, but when I try to patch an existing cron expression into my reactive form, the UI of the cron editor does not update. The FormControl value changes, but the editor continues to show default values instead of the patched cron.

Example:

<cron-editor
[formControlName]="cronConfigConstant.cronConfigFormDetails.cronExpression.key"
[options]="cronOptions">
</cron-editor>
private patchCronForm() {
this.cronConfigService.editCronFormSub
.pipe(takeUntil(this.destroySubscription))
.subscribe((resp: CronDetailsModel) => {
// --- ADD THESE LOGS ---
console.log('Incoming Data object:', resp);
console.log('API value for cron_expression:', resp?.cron_expression);
if (resp) {
this.editCronId = resp?.id
this.cronConfigForm.patchValue({
[this.cronConfigConstant.cronConfigFormDetails.cronName.key]: resp?.[this.cronConfigConstant.cronConfigFormDetails.cronName.key],
[this.cronConfigConstant.cronConfigFormDetails.cronDescription.key]: resp?.[this.cronConfigConstant.cronConfigFormDetails.cronDescription.key],
cron_expression: resp.cron_expression
});

this.cdr.detectChanges();
const element = document.getElementById('cronForm');
element?.scrollIntoView({behavior: 'smooth'});
}
}, err => {
console.error('err', err);
});
}


The form value updates, but the cron editor stays unchanged. I also tried setValue(), triggering change detection, and using ngOnChanges, but nothing makes the editor reflect the patched cron. It only updates when the user manually edits the component.

Is this a known issue with ngx-cron-editor@0.7.0? Is there a proper way to programmatically load a cron value into the editor, or do I need to use another library? Any working example would be helpful.

Continue reading...