Angular嵌套组件表单提交时无效字段未显示错误样式的解决方法

你的问题核心在于子组件中多余的<form>标签打断了父表单的状态传递，同时提交时未触发子控件的状态更新，导致Material输入框的错误样式无法显示。以下是具体解决步骤：

1. 移除子组件中的独立<form>标签 #

子组件不需要再包裹<form>，因为它已经属于父表单的一部分，独立的表单实例会阻断父表单的submitted状态传递。修改子组件模板：

<!-- 子组件模板 -->
<div [formGroup]="group">
  <input matInput formControlName="city">
</div>

2. 确保子组件正确接收FormGroup输入 #

在子组件类中显式定义输入属性（如果还没加的话）：

// 子组件类
import { Component, Input } from '@angular/core';
import { FormGroup } from '@angular/forms';

@Component({
  selector: 'child-component',
  templateUrl: './child.component.html'
})
export class ChildComponent {
  @Input() group!: FormGroup;
}

3. 提交时触发所有控件的状态更新 #

在父组件的submit方法中，调用markAllAsTouched()标记所有控件（包括子组件内的控件）为已触摸状态，这样Material输入框会自动显示错误样式：

// 父组件类
submit() {
  // 先标记所有控件为已触摸，触发错误样式
  this.form.markAllAsTouched();
  
  // 验证通过后再处理提交逻辑
  if (this.form.valid) {
    // 执行表单提交操作
    console.log('表单提交:', this.form.value);
  }
}

原理说明 #

Angular Material的输入框错误样式依赖控件的touched/dirty状态，或者表单的submitted状态。之前子组件的独立<form>会创建一个和父表单无关的表单实例，父表单提交时，子控件的状态不会被同步更新；移除子表单并调用markAllAsTouched()后，所有属于父表单的控件都会被标记为已触摸，错误样式自然会触发。

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