Angular动态设置FormArray的setValidators无效问题排查

原代码的核心问题 #

• 未处理验证移除逻辑：只在key非空且value为空时添加必填验证，但当key变为空时，没有移除value的必填验证，导致后续即使key清空，value仍被要求必填。
• distinctUntilChanged()的误用：表单的value是对象类型，默认的distinctUntilChanged采用引用相等性检查，而表单值变化时对象引用通常不会改变，这会导致订阅无法触发。
• 逻辑覆盖不全面：仅在value为空时触发验证设置，但当key非空且value已填写后又清空、key从非空变为空这类场景，都没有处理。

修正后的代码 #

this.form.valueChanges
  .pipe(
    // 改用对象值的深度比较，确保值变化时能触发订阅
    distinctUntilChanged((prev, curr) => JSON.stringify(prev) === JSON.stringify(curr))
  )
  .subscribe({
    next: () => {
      const i18nArray = this.form.get('i18nDescription') as FormArray;
      i18nArray.controls.forEach((formGroup: FormGroup) => {
        const keyControl = formGroup.get('key');
        const valueControl = formGroup.get('value');
        if (!keyControl || !valueControl) return;

        const keyValue = keyControl.value?.trim() || '';
        // 根据key的值动态添加/移除验证
        if (keyValue) {
          valueControl.setValidators(Validators.required);
        } else {
          valueControl.clearValidators();
        }
        // 更新控件状态，避免触发valueChanges循环
        valueControl.updateValueAndValidity({ emitEvent: false, onlySelf: true });
      });
    }
  });

关键优化点 #

• 动态移除验证：当key为空时，调用clearValidators()移除value的必填验证，保证逻辑双向生效。
• 修复distinctUntilChanged()：使用JSON序列化后的字符串比较，确保表单值实际变化时能触发订阅。
• 直接操作控件而非value：直接获取key和value控件，避免依赖formGroup.value的快照，同时添加空值检查提升鲁棒性。
• 更精准的更新策略：调用updateValueAndValidity时添加onlySelf: true，只更新当前控件状态，避免影响父表单的状态更新。

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