Angular 11中如何从父组件取消订阅validator内的valueChanges

首先你当前的写法存在先天问题：验证器函数会在校验每次触发时重复执行，直接在内部写订阅会导致重复绑定，即使后续做了销毁逻辑也会存在内存泄漏风险，最佳实践是让验证器保持纯函数属性，只做校验逻辑，不要包含订阅等副作用操作。

方案1：将联动逻辑迁移到组件层（最推荐） #

把跨字段校验的联动逻辑放到组件内统一管理，利用组件的生命周期做订阅销毁，验证器仅保留纯校验逻辑：

组件代码调整 #

import { FormBuilder, FormGroup, Validators } from '@angular/forms'
import { Subject } from 'rxjs'
import { takeUntil } from 'rxjs/operators'
import { validator1, validator2 } from './validators'

@Component()
export class MyForm implements OnInit, OnDestroy {
  theForm: FormGroup
  // 用于统一取消所有订阅的主体
  private destroy$ = new Subject<void>()
  
  constructor(private fb: FormBuilder) {
    this.createForm();
  }

  ngOnInit() {
    // 统一处理跨字段联动
    this.theForm.get('field2').valueChanges
      .pipe(takeUntil(this.destroy$))
      .subscribe(() => {
        // 仅更新field1的校验状态，避免触发全局事件循环
        this.theForm.get('field1').updateValueAndValidity({
          onlySelf: true,
          emitEvent: false
        })
      })
  }

  ngOnDestroy() {
    // 组件销毁时触发所有订阅的取消
    this.destroy$.next()
    this.destroy$.complete()
  }

  createForm() {
    this.theForm = this.fb.group({
      field1: ['', [validator1, validator2]],
      field2: ['', Validators.minLength(10)]
      // 其他控件
    })
  }
}

验证器代码调整 #

删除验证器内的订阅逻辑，仅保留纯校验部分：

export function validator1() {
  return (thisControl: FormControl) => {
    const otherControl = thisControl.parent?.get('field2') as FormControl
    // 这里直接写你的校验逻辑即可
    if (isValid(thisControl.value, otherControl?.value)) {
      return null;
    } else {
      return { 'invalidValue': true }
    }
  }
}

方案2：给验证器传入销毁信号（适合需要封装联动逻辑的场景） #

如果希望把联动逻辑封装在验证器内，可以给验证器传入组件的销毁信号，同时做重复订阅拦截：

验证器代码调整 #

import { Observable } from 'rxjs'
import { takeUntil } from 'rxjs/operators'

export function validator1(destroy$: Observable<void>) {
  return (thisControl: FormControl) => {
    // 拦截重复订阅
    if (thisControl['_validator1BindFlag']) {
      // 直接走校验逻辑
      return isValid(thisControl.value) ? null : { 'invalidValue': true }
    }
    // 标记已绑定过订阅
    thisControl['_validator1BindFlag'] = true

    const otherControl = thisControl.parent.get('field2') as FormControl
    otherControl.valueChanges
      .pipe(takeUntil(destroy$))
      .subscribe(() => {
        thisControl.updateValueAndValidity({
          onlySelf: true,
          emitEvent: false
        })
      })
    
    return isValid(thisControl.value) ? null : { 'invalidValue': true }
  }
}

组件代码调整 #

创建表单时把销毁信号传给验证器即可：

createForm() {
  this.theForm = this.fb.group({
    field1: ['', [validator1(this.destroy$), validator2]],
    field2: ['', Validators.minLength(10)]
    // 其他控件
  })
}

注意事项 #

• 验证器的核心职责是接收控件值返回校验结果，保持纯函数属性会大幅降低维护成本和异常概率
• 如果必须在验证器内做订阅，一定要加重复订阅拦截逻辑，避免每次校验都新增订阅
• Angular 14及以上版本可以直接用AbstractControl自带的destroyed事件作为销毁信号，不需要自己在组件维护destroy$

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