如何让Angular父FormGroup在所有嵌套FormGroup验证通过前保持无效

问题描述 #

我有一个包含嵌套FormGroup的父FormGroup，需要通过代码给BasicInfo子FormGroup的firstName控件设置必填验证。要求任意子表单无效时，父表单保持无效状态，以此禁用提交按钮，直到所有子表单验证通过。但当前逻辑仅在触碰子输入元素后才生效，初始加载时父表单始终显示有效状态——即使firstName为空，提交按钮也未被禁用。

现有代码 #

父组件 user-registration.component.ts #

.....
this.userForm = this.fb.group({
  basicInfo: this.fb.group({
    firstName: [],
    lastName: [],
    email: [],
    age: []
  }),
  .....

子组件 basic-info.component.ts #

// 设置firstName为必填
ngAfterViewInit(){
  this.form.get('firstName').setValidators(Validators.required)
  this.form.updateValueAndValidity()
}

子组件表单界面 #

初始加载问题 #

问题原因 #

ngAfterViewInit钩子的执行时机晚于父表单的初始校验流程。虽然子组件中调用了updateValueAndValidity()，但默认参数emitEvent为false，不会触发父表单的状态更新，导致父表单初始状态仍判定为有效。

解决方案 #

方案1：父组件初始化时直接设置验证（推荐） #

在创建FormGroup阶段就给firstName添加必填验证，确保初始状态下校验规则生效：

import { Validators } from '@angular/forms';

// ...

this.userForm = this.fb.group({
  basicInfo: this.fb.group({
    firstName: ['', Validators.required], // 直接注入必填验证
    lastName: [],
    email: [],
    age: []
  }),
  .....

方案2：子组件动态设置验证后触发父表单更新 #

若必须在子组件中动态配置验证，需在更新有效性时触发事件通知父表单，同时提前执行时机：

import { Input, OnInit } from '@angular/core';
import { FormGroup, Validators } from '@angular/forms';

@Component({
  // 组件元数据
})
export class BasicInfoComponent implements OnInit {
  @Input() form: FormGroup;

  ngOnInit() { // 改用ngOnInit，早于视图初始化执行
    const firstNameCtrl = this.form.get('firstName');
    firstNameCtrl.setValidators(Validators.required);
    // 触发更新并通知父表单
    firstNameCtrl.updateValueAndValidity({ emitEvent: true });
  }
}

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