cssangularngx-quill

Quill Editor Color Based On Validator

Quill Editor with validation

<quill-editor formControlName="qed" placeholder="Input notes, minimum 10 char" [minLength]="10" required></quill-editor>

.ng-invalid {border: 2px solid red}

Once validation fails will have a red border triggered by ng-invalid, corresponding element is <div class="ql-editor">

enter image description here

It doesn't happens. F12 finds out because ng-invalid shows up in its grandparent <quill-editor>:

<quill-editor formcontrolname="qed" class="ng-invalid">
  <div class="ql-toolbar ql-snow">...</div>
  <div quill-editor-element>
    <div class="ql-editor">Red Here!</div>
  </div>
</quill-editor>

Can't figure out how to make it without code unless to check its grandparent

Solution

  • After many tries, place inside top/root level styles.css:

    .ng-invalid .ql-editor {border: 2px solid red}
.ng-valid .ql-editor {border: 2px solid green}