Angular表单控件赋值后required验证错误未显示问题

我使用Quill编辑器，DOM结构如下：

<div id="editor"></div>

通过以下代码将编辑器内容赋值给表单控件：

this.FrmGroup.get("name").setValue(this.quill.root.innerHTML)

表单验证提示的模板代码是：

<div *ngIf="FrmGroup.get('name').invalid && (FrmGroup.get('name').dirty || FrmGroup.get('name').touched)">
  <small class="validation-error">请输入名称。</small>
</div>

表单组初始化代码如下：

this.FrmGroup = this.fb.group({
  name: ['', Validators.required],
  Description: ['', Validators.required],
});

当前name控件值为空，但验证错误提示并未显示。

核心原因 #

1. Quill编辑器空内容的默认输出是<p><br></p>，这是一个非空字符串，Angular的Validators.required只会识别空字符串、null或undefined为无效，所以控件不会被标记为invalid。
2. 直接用setValue赋值不会自动触发控件的dirty或touched状态，而你的验证提示依赖这两个状态才会显示。

具体解决步骤 #

• 处理Quill空内容：赋值前先判断编辑器内容是否为空，把Quill的空HTML转换成空字符串：

const editorHtml = this.quill.root.innerHTML.trim();
// 匹配Quill空内容的默认格式
const isEmptyContent = editorHtml === '<p><br></p>' || editorHtml === '';
this.FrmGroup.get('name').setValue(isEmptyContent ? '' : editorHtml);

• 手动触发控件状态：赋值后标记控件为touched或dirty，满足验证提示的显示条件：

this.FrmGroup.get('name').markAsTouched();
// 也可以用markAsDirty，根据需求选择
// this.FrmGroup.get('name').markAsDirty();

• 可选：自定义验证器（更精准校验）：如果需要排除纯空格、空标签这类无效内容，可以给name控件加自定义验证器：

import { AbstractControl, ValidatorFn } from '@angular/forms';

// 自定义验证器：排除空HTML或纯空格内容
export function validContent(): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {
    if (!control.value) return { required: true };
    // 移除所有HTML标签后判断是否有有效文本
    const plainText = control.value.replace(/<[^>]*>/g, '').trim();
    return plainText ? null : { emptyContent: true };
  };
}

// 表单初始化时添加自定义验证器
this.FrmGroup = this.fb.group({
  name: ['', [Validators.required, validContent()]],
  Description: ['', Validators.required],
});

对应的验证提示调整为：

<div *ngIf="FrmGroup.get('name').invalid && (FrmGroup.get('name').dirty || FrmGroup.get('name').touched)">
  <small class="validation-error" *ngIf="FrmGroup.get('name').errors?.required">请输入名称。</small>
  <small class="validation-error" *ngIf="FrmGroup.get('name').errors?.emptyContent">名称不能仅包含空标签或空格。</small>
</div>

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