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}