Angular父表单更新异常：绑定无效子表单控制器时父状态不更新

Hey there, let's break down this tricky form state issue you're dealing with. It sounds like you've already pinpointed the key clue—this only happens when the form is invalid, and the root of the problem ties into how Angular propagates control validity changes up to parent forms.

Why This Happens #

Angular's form hierarchy relies on statusChanges events to sync validity states between child controls and parent forms. When a control has no validators assigned, Angular sometimes skips triggering these events when the control's state changes (like going from invalid to valid). This leaves the parent form stuck with an outdated invalid status, even though all child controls are now valid.

Your workaround with setValidators([]) works because it forces the control to register an empty validator array, which makes Angular treat it as part of the normal state change flow—so updates get properly propagated up to the parent form.

Solutions to Try #

1. Explicitly Set Empty Validators in the Service

Instead of adding validators in the component, update your FormService to initialize all controls with an empty validator array if they don't need validation. This ensures consistent state tracking from the start:

// In your FormService
createParentForm() {
  this.parentForm = new FormGroup({
    requiredName: new FormControl('', Validators.required),
    optionalNotes: new FormControl('', []), // Empty validator array instead of no validators
    childSubForm: new FormGroup({
      optionalChildField: new FormControl('', [])
    })
  });
}

2. Force State Sync in the Component's ngOnInit

If you can't modify the Service, explicitly trigger a full validity update for the parent form after loading it, and ensure all child controls are properly registered:

ngOnInit() {
  this.parentForm = this.formService.parentForm;

  // Target controls that originally have no validators
  const emptyValidatorControls = ['optionalNotes', 'childSubForm.optionalChildField'];
  
  emptyValidatorControls.forEach(controlPath => {
    this.parentForm.get(controlPath)?.setValidators([]);
    // Update each control's state immediately
    this.parentForm.get(controlPath)?.updateValueAndValidity({ onlySelf: true });
  });

  // Finally, update the parent form to sync all changes
  this.parentForm.updateValueAndValidity({ emitEvent: true, onlySelf: false });
}

3. Why updateValueAndValidity() Alone Didn't Work

When you called updateValueAndValidity() on the parent form without adjusting the child controls, Angular didn't detect any changes in the child controls' validator setup—so it didn't update the parent's validity state. By first setting the empty validators, you're telling Angular to re-evaluate those controls, which then triggers the parent form to re-calculate its own validity.

Final Notes #

This edge case pops up because Angular optimizes form state checks by ignoring controls with no validators. Explicitly setting an empty validator array removes that optimization and ensures every control participates in the validity sync flow, preventing the parent form from getting stuck in an invalid state after navigation.

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