Quill Editor 根据校验器设置颜色时红边框不生效如何解决？

直接通过层级CSS选择器命中目标节点即可，不需要修改业务逻辑：

• 如果你是在全局样式文件中定义样式，直接使用以下规则：

quill-editor.ng-invalid .ql-editor {
  border: 2px solid red;
}

• 如果你是在Angular业务组件的样式文件中定义规则，需要用::ng-deep穿透组件样式隔离：

::ng-deep quill-editor.ng-invalid .ql-editor {
  border: 2px solid red;
}

优化建议 #

如果希望避免页面刚加载、用户还未操作编辑器就显示红框，可以增加Angular表单状态类的判断，只在用户交互过后校验失败时才显示样式：

/* 仅用户触碰过编辑器且校验失败时显示红框 */
quill-editor.ng-invalid.ng-touched .ql-editor {
  border: 2px solid red;
}

原理解释 #

你之前的写法是给所有携带ng-invalid类的元素直接加边框，所以边框只会作用在quill-editor根节点上，不会传递给内部的.ql-editor元素。上面的选择器精准匹配了「携带校验失败类的quill-editor组件」下的编辑器内容节点，就能实现你要的效果。

内容的提问来源于stack exchange，提问作者Jeb50