Angular响应式表单提交时如何显示未触碰字段的错误？

问题现象 #

空表单点击提交后，字段仍保留ng-pristine类，未变为ng-dirty；调用this.form.markAsDirty()后也无效果。

原因分析 #

1. markAllAsTouched()的局限性：该方法仅将表单控件标记为touched（表示用户已接触过控件），但不会修改dirty状态。
2. dirty状态的触发逻辑：Angular中dirty状态仅在控件值与初始值不一致时才会自动触发，空提交时用户未修改字段值（仍为初始空字符串），所以控件不会自动变为dirty。
3. 表单组markAsDirty()的范围：直接调用表单组的markAsDirty()只会标记表单组本身为dirty，不会递归设置所有子控件的dirty状态。

解决方案 #

需要遍历所有表单控件，同时手动设置touched和dirty状态：

修改提交逻辑中的else分支 #

async createUser() {
  if (this.form.valid) {
    // 原有提交逻辑不变
    this.uiService.startBusyIndicator('Adding user...');
    try {
      await this.userSettingsService.createUser(this.form.get('name')?.value, this.form.get('email')?.value);
      this.messageService.add({ severity: 'success', summary: 'User added', detail: 'User added successfully' });
    } finally {
      this.uiService.stopBusyIndicator();
      this.form.reset();
    }
  } else {
    console.log('Marking everything as touched and dirty');
    // 遍历所有控件，设置touched和dirty状态
    Object.values(this.form.controls).forEach(control => {
      control.markAsTouched();
      control.markAsDirty();
      // 可选：如果需要强制更新验证状态，添加以下代码
      // control.updateValueAndValidity({ emitEvent: false });
    });
  }
}

效果说明 #

• markAsTouched()：确保错误提示组件能检测到用户已触发过提交操作，显示对应错误信息。
• markAsDirty()：直接修改控件状态，让ng-dirty类生效，符合视觉反馈需求。
• 可选的updateValueAndValidity({ emitEvent: false })：强制触发验证更新，同时避免触发不必要的表单值变更事件。

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