0

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

Jeb50
  • 6,272
  • 6
  • 49
  • 87

1 Answers1

2

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}
Jeb50
  • 6,272
  • 6
  • 49
  • 87