Utilizing CKEditor5 with Angular Material

My code displays the Request Title input box without any issues, but encounters an error in the console when attempting to implement a WYSIWYG editor for the Request Description field. I am currently working on integrating this feature into my Angular v10 application.


I am attempting to incorporate
WYSIWYG editor
into my Angular v10 application. The editor I’m using is functional. However, when I try to implement it using Angular Material in
, I encounter issues. The following is my code.

Request Title* Request Description / Requirements*

The title of Request
input box
seems acceptable, but the Request Description field, which employs a WYSIWYG editor, generates an error in the console. Specifically, the error message reads “Mat-form-field must contain a MatFormFieldControl.” Although inserting a regular input box permits the editor to display, it loses focus as soon as I click on it, redirecting the focus to the added input box.

  Request Description / Requirements*

Despite my addition of the matInput tag to ckeditor, it failed to function as intended.


After researching online, I came across a suggested solution for the issue. However, it did not resolve the problem I was facing.


When I insert a dummy textbox inside the

tag, it appears like this. However, clicking on the editor immediately shifts the focus to the dummy textbox, as shown in the image.


  Message (please edit as needed)

on ts file

onFocusElement() {
    this.messageClass = 'msg-ckeditor';
onFocusoutElement() {
    if (Utility.isNullorUndefined(this.model.message) || this.model.message.trim() === '') {
      this.messageClass = 'msg-ckeditor-error';
    } else {
      this.messageClass = '';

and on css side

.msg-ckeditor .mat-form-field-appearance-outline .mat-form-field-outline {
  color: #01a79d;
.msg-ckeditor-error .mat-form-field-appearance-outline .mat-form-field-outline {
  color: #f44336;

I was able to successfully use it with ckeditor v1.2.6. If you have an alternative solution, kindly share it.

Frequently Asked Questions