css - Quill Editor 颜色基于验证器

Question

带有验证功能的 Quill 编辑器

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

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

一旦验证失败会有一个由 触发的红色边框ng-invalid，对应的元素是<div class="ql-editor">

它不会发生。F12 发现因为ng-invalid出现在其祖父母中<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>

除非检查其祖父母，否则无法弄清楚如何在没有代码的情况下制作它

Answer 1

经过多次尝试，放置在顶级/根级别styles.css：

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