Angular中如何禁用fieldset后关闭其内部表单数组的验证？

我明白你遇到的困扰了——用<fieldset>禁用表单区域后，里面的控件居然还会触发验证规则，这确实不符合预期。问题的核心在于：Angular的表单控件状态和HTML元素的禁用状态是相互独立的。<fieldset disabled>只是让UI层面无法交互，但Angular的FormControl本身并没有被标记为禁用，所以验证逻辑依然会正常执行。

下面给你两种实用的解决方案，你可以根据场景选择：

方法一：手动禁用/启用FormGroup（推荐） #

当勾选"No Quote"时，直接禁用对应的finishedComponent FormGroup，这样Angular会自动跳过该组内所有控件的验证，同时UI上也会保持禁用状态。

修改TS中的onChangeNoQuote方法 #

onChangeNoQuote(isChecked: boolean, part: FormGroup) {
  // 获取对应的finishedComponent表单组
  const finishedComponentGroup = part.get('finishedComponent') as FormGroup;
  
  if (isChecked) {
    // 禁用整个表单组，emitEvent: false避免触发不必要的表单值变更事件
    finishedComponentGroup.disable({ emitEvent: false });
  } else {
    // 恢复表单组可用
    finishedComponentGroup.enable({ emitEvent: false });
  }
}

HTML保留fieldset的视觉提示 #

原来的<fieldset>可以继续保留，作为UI上的禁用视觉反馈，核心逻辑已经通过代码同步到表单控件状态：

<fieldset [disabled]="part.value.isNoQuote">
  <!-- 内部表单控件 -->
</fieldset>

方法二：动态添加/移除验证规则 #

如果你的场景不需要完全禁用控件，只是想在"No Quote"时跳过验证，可以选择动态修改验证规则：

修改TS中的onChangeNoQuote方法 #

onChangeNoQuote(isChecked: boolean, part: FormGroup) {
  const minOrderQtyControl = part.get('finishedComponent.minOrderQuantity') as FormControl;
  
  if (isChecked) {
    // 移除验证规则
    minOrderQtyControl.clearValidators();
  } else {
    // 重新添加验证规则
    minOrderQtyControl.setValidators([Validators.min(0), Validators.max(999999999)]);
  }
  
  // 更新控件的验证状态，确保变化生效
  minOrderQtyControl.updateValueAndValidity({ emitEvent: false });
}

额外优化：初始化时同步状态 #

如果表单初始化时isNoQuote可能为true，记得在创建表单组时就同步控件状态：

newPart(isNoQuote = false): FormGroup {
  const finishedComponentGroup = this.formBuilder.group({
    minOrderQuantity: [null, isNoQuote ? [] : [Validators.min(0), Validators.max(999999999)]]
  });

  // 如果默认是No Quote，直接禁用表单组
  if (isNoQuote) {
    finishedComponentGroup.disable({ emitEvent: false });
  }

  return this.formBuilder.group({
    partNo: [null],
    quantity: [null],
    isNoQuote: [isNoQuote],
    finishedComponent: finishedComponentGroup
  });
}

这样处理后，当勾选"No Quote"时，不仅UI上无法操作，Angular表单控件也会同步进入禁用状态，自然就不会再触发验证规则了。

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