Angular中如何将验证规则传递至嵌套表单？

核心问题在于你只是通过@ViewChild获取了子表单的实例和数据，但没有将子表单的FormGroup集成到父表单的控件树中，导致父表单提交时无法联动触发子表单的验证逻辑。以下是具体修复步骤：

1. 子组件暴露表单实例 #

确保子组件的表单实例是公开可访问的，方便父组件集成：

// riddle-form.component.ts
import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-riddle-form',
  templateUrl: './riddle-form.component.html'
})
export class RiddleFormComponent {
  // 公开子表单实例，允许父组件访问
  public riddleForm = new FormGroup({
    riddleText: new FormControl('', Validators.required),
    answer: new FormControl('', [Validators.required, Validators.minLength(3)])
  });
}

2. 父组件集成子表单到自身控件树 #

在父组件中，将子表单的FormGroup替换为父表单中对应的控件，让父表单能感知子表单的验证状态：

// quest-form.component.ts
import { Component, ViewChild, AfterViewInit } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { RiddleFormComponent } from './riddle-form.component';

@Component({
  selector: 'app-quest-form',
  templateUrl: './quest-form.component.html'
})
export class QuestFormComponent implements AfterViewInit {
  questForm = new FormGroup({
    questName: new FormControl('', Validators.required),
    // 先初始化空的FormGroup占位
    riddle: new FormGroup({})
  });

  @ViewChild(RiddleFormComponent) riddleFormComponent!: RiddleFormComponent;

  ngAfterViewInit(): void {
    // 将子表单实例替换到父表单的对应控件中
    this.questForm.setControl('riddle', this.riddleFormComponent.riddleForm);
  }

  onSubmit(): void {
    // 触发整个表单的验证（包括子表单）
    if (this.questForm.invalid) {
      this.questForm.markAllAsTouched();
      return;
    }
    // 处理提交逻辑，此时this.questForm.value包含所有字段（含子表单）
    console.log('提交数据:', this.questForm.value);
  }
}

3. 模板绑定调整 #

父表单模板保持整体表单绑定，子组件内部正常使用自身表单绑定即可：

<!-- quest-form.component.html -->
<form [formGroup]="questForm" (ngSubmit)="onSubmit()">
  <div>
    <label>任务名称:</label>
    <input formControlName="questName">
    <span *ngIf="questForm.get('questName')?.invalid && questForm.get('questName')?.touched">
      任务名称不能为空
    </span>
  </div>

  <!-- 子表单组件 -->
  <app-riddle-form></app-riddle-form>

  <button type="submit">提交任务</button>
</form>

子组件模板无需修改，正常绑定自身表单：

<!-- riddle-form.component.html -->
<div [formGroup]="riddleForm">
  <div>
    <label>谜题内容:</label>
    <input formControlName="riddleText">
    <span *ngIf="riddleForm.get('riddleText')?.invalid && riddleForm.get('riddleText')?.touched">
      谜题内容不能为空
    </span>
  </div>
  <div>
    <label>答案:</label>
    <input formControlName="answer">
    <span *ngIf="riddleForm.get('answer')?.invalid && riddleForm.get('answer')?.touched">
      答案不能为空且至少3个字符
    </span>
  </div>
</div>

关键注意点 #

• 不要单独通过@ViewChild获取子表单的值提交，必须将子表单集成到父表单控件树，才能让父表单的invalid状态包含子表单的验证结果。
• 调用questForm.markAllAsTouched()时，会自动遍历所有子控件触发验证状态更新，无需单独处理子表单。

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