Angular响应式表单提交时自定义表单组件无法显示验证错误的问题求助

这个问题的核心是触摸状态没有从父表单控件同步到自定义组件内部的表单控件。当你手动点击组件时，内部的officeLocationControl会被标记为touched，所以mat-error能正常显示；但提交表单时，你调用的markAsTouched()只会触发自定义组件的onTouched()方法，而你的实现没有把这个状态传递给内部控件，导致错误提示无法显示。

下面是具体的修复步骤：

1. 同步触摸状态到内部控件 #

首先，修改自定义组件的registerOnTouched方法，在触发父控件的触摸回调时，同时标记内部的officeLocationControl为已触摸。另外，因为你的组件用了ChangeDetectionStrategy.OnPush，需要手动触发变更检测来更新视图。

首先在CityComponent的构造函数中注入ChangeDetectorRef：

import { ChangeDetectorRef } from '@angular/core';

// ...

constructor(
  private cityService: CityService, 
  private formBuilder: FormBuilder,
  private cdr: ChangeDetectorRef // 新增
) {
  // ... 原有代码
}

然后更新registerOnTouched方法：

registerOnTouched(fn: () => void) {
  this.onTouched = () => {
    fn(); // 触发父控件的触摸回调
    // 标记内部控件为已触摸
    this.officeLocationControl.markAsTouched();
    // 手动触发变更检测，更新视图
    this.cdr.detectChanges();
  };
}

2. 优化验证函数返回值 #

原来的validate方法返回的错误对象比较模糊，改成直接返回内部控件的错误，这样父表单的错误状态能更准确地反映内部控件的问题：

validate(_: FormControl) {
  // 返回内部控件的错误，或者null（如果有效）
  return this.officeLocationControl.errors ? { ...this.officeLocationControl.errors } : null;
}

3. 简化父表单的提交逻辑 #

在父组件的submit方法中，不需要单独处理每个控件，直接调用markAllAsTouched()就能一次性标记所有控件（包括自定义组件）为已触摸，代码更简洁：

submit() {
  if(this.clientProfileForm.valid){
    this.clientService.postClient(this.clientProfileForm.value);
  }else{
    this.showValidationError = true;
    // 标记所有控件为已触摸
    this.clientProfileForm.markAllAsTouched();
  }
}

做完这些修改后，当你点击表单的Next按钮时，自定义组件的内部控件会被正确标记为已触摸，mat-error就会正常显示「请选择办公地点」的错误提示了。

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