NGX-Quill提交无内容且编辑器异常问题求助

1. 修正QuillModule的注册方式 #

ngx-quill要求在**根模块（AppModule）**中使用QuillModule.forRoot()完成初始化配置，懒加载模块中无需重复注册或使用QuillModule.forChild()。你当前未使用forRoot()，会导致编辑器核心功能未正确初始化，这是表单绑定失效、编辑器无响应的核心原因之一。

修改AppModule中的注册代码：

import { QuillModule } from 'ngx-quill';

@NgModule({
  imports: [
    // ...其他模块
    QuillModule.forRoot()
  ]
})
export class AppModule { }

懒加载模块中移除QuillModule的注册，避免重复初始化冲突。

2. 检查版本兼容性 #

ngx-quill ^14.3.0 对应的 Angular 版本为 13.x 及以上，而你使用的是 Angular 12.2.0，版本不匹配会引发大量兼容性问题（如表单绑定失效、编辑器UI异常）。建议调整版本：

• 将 ngx-quill 降级到适配 Angular 12 的版本（推荐 ^13.2.0）
• 或将 Angular 升级到 13.x 及以上版本

3. 修正编辑器格式配置 #

你设置了format="text"，该属性用于指定编辑器输出纯文本格式。若表单需要获取富文本内容，建议移除该属性（默认输出HTML格式）；若确实需要纯文本，需确认绑定逻辑适配该格式：

<!-- 移除format属性，使用默认HTML格式 -->
<quill-editor 
    #descriptionEditor
    formControlName="description"
    name="description"
    placeholder="Enter Text"
    [modules]="editor"
>
</quill-editor>

4. 修复响应式表单语法错误 #

你提供的表单构建代码存在语法错误，修正后确保表单实例正确创建：

this.caseFormGroup = this._formBuilder.group({
  description: new FormControl(null, [Validators.required])
}); // 修正多余的右括号

5. 验证编辑器基础功能 #

完成上述修正后，测试编辑器核心功能：

• 确认输入文字时占位符正常消失
• 提交表单前，通过console.log(this.caseFormGroup.get('description')?.value)查看控件值是否正确更新

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