Ckeditor5-angular: ExpressionChangedAfterItHasBeenCheckedError after changing the formControl (Reactive Form)

[chrisschauer]

Hi,

i use ckeditor component in a reactive form, where i can also switch the edit language of the form.
A field e.g. a "Title" is a form group with multiple controls named like "de, en, hu, ...":

<div *ngIf="editLanguage | async as lang">
    <ckeditor [formGroup]="control" 
              [editor]="EditorLongDescriptionInline"
              [formControl]="control.get(lang.name)">
    </ckeditor>
</div>

The first language change works quite well. After the first one changes of the edit language leads to this error on console:

13:32:27,385 ERROR admin platform.GlobalErrorHandler: handleError: "ExpressionChangedAfterItHasBeenCheckedError: Expression has changed after it was checked. Previous value: 'ng-pristine: true'. Current value: 'ng-pristine: false'."

Can't see this issue on the material input fields. Anything i can check?
Thx

Angular: 7.2.9
CKEditor-Angularr: 1.1.0
CKEditor-inline: 12.3.0

[ma2ciek]

Hi @chrisschauer.

It's the first time I see this error, I'll check it.

[ma2ciek]

I see that dynamically toggling the value of the <ckeditor> component doesn't work well with Reactive Forms. I don't know why as Reactive Forms rely on ControlValueAcecessor, same as e.g. the ngForm, which works well in that scenario. I'll try to investigate it more, maybe there's a bug in the current implementation of this interface or maybe the async editor nature somehow conflicts with the sync nature of Reactive Forms.

[ma2ciek]

TBH, I didn't manage to produce the ExpressionChangedAfterItHasBeenCheckedError error, but the above finding seems to be connected.

[ma2ciek]

Ok, I understand at least my bug. Selecting new language triggers setting new data on the component, which causes changing editor data which fires change:data just after the change. The <ckeditor> component listens to this event and reacts to it calling among others the cvaOnChange() (ControlValueAccessor onChange callback). And this mechanism, unfortunately, overwrites the data of the just selected editor. A simple lock mechanism fixes it. I'll create a PR. Hopefully, it will fix your error as well.

[ma2ciek]

@chrisschauer, could you test if the above PR fixes your issue?

[ma2ciek]

Actually the PR makes the two-way binding with [(ngModel)] more accurate and less bug-prone.

[chrisschauer]

Thank you very much for effort of investigation @ma2ciek.
Sorry for the delayed answer - i try to test the PR today.

Thx

[chrisschauer]

Hi @ma2ciek

indeed your PR #140 solves the problem while changing the language and also the exception disappeared. I really appriciate your work. Thanks for the quick fix.

Will be there a new release including the fix in the near future?

[ma2ciek]

Thanks, @chrisschauer,

I need to take a look at https://github.com/ckeditor/ckeditor5-angular/issues/141 and its PR and once it is resolved I'll release a new version, so it should be available within 1-2 weeks.

[ma2ciek]

Update: The latest release includes the fix - "@ckeditor/ckeditor5-angular": "1.1.2"

[chrisschauer]

Works perfect!