Why the CKEditor 4 Angular module form field validation does not work?

Question

Why the CKEditor 4 Angular module form field validation does not work?

My is resided in here.

I have tried different combination of .touched,.pristine, .valid.

However, the field does not work like another field.

That mean under the un-touch condition when I click on "save" button,

the other field error message will be shown, however, the CKEditor does not.

Answer 1

You can use this instead what you used in demo

<mat-error *ngIf="(contact.touched || callTreeEditForm.submitted)  && contact.errors?.required">
      Call tree contact is <strong>required</strong>
    </mat-error>

You have used this

 <mat-error *ngIf="contact.touched && contact.invalid">
      Call tree contact is <strong>required</strong>
    </mat-error>

But here when user touched your ckeditor then and then you will get error validation So you should use this condition (contact.touched || callTreeEditForm.submitted) so you can get proper validation on input blur event and form submit event. Instead of using contact.invalid I preferred using this contact.errors?.required because invalid will give you both required or invalid value so I think for required you can use contact.errors?.required instead of invalid.