基于验证器的羽毛笔编辑器颜色

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

多次尝试后，放置在top/root关卡styles.css:

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

基于验证器的羽毛笔编辑器颜色

Quill Editor Color Based On Validator

css

angular

ngx-quill