Angular响应式表单ReactiveForms如何手动触发输入项校验

你只需要监听新密码控件的数值变更事件，每次新密码修改时主动触发确认密码控件的重新校验即可，具体修改如下：

1. 新增新密码变更监听逻辑 #

修改initChangePasswordForm方法，在表单初始化完成后添加订阅逻辑：

// 需提前导入rxjs相关依赖（处理内存泄漏时需要）
import { Subject } from 'rxjs';
import { takeUntil } from 'rxjs/operators';

// 组件内新增销毁主题变量，避免内存泄漏
private destroy$ = new Subject<void>();

private initChangePasswordForm() {
  this.changePasswordForm = this.formBuilder.group({
    old_password: [null, Validators.pattern('^(?=.*?[A-Z])(?=.*?[a-z])(?=.*?[0-9])(?=.*?[^\\w\\s]).{8,}$')],
    new_password: [null, this.customComparePasswordValidator],
    confirm_password: [null, Validators.required]
  });

  // 监听新密码值变更，主动触发确认密码重新校验
  this.changePasswordForm.get('new_password').valueChanges
    .pipe(takeUntil(this.destroy$))
    .subscribe(() => {
      this.changePasswordForm.get('confirm_password').updateValueAndValidity();
    });
}

// 组件销毁时释放订阅
ngOnDestroy() {
  this.destroy$.next();
  this.destroy$.complete();
}

实现原理 #

valueChanges是Angular响应式表单控件自带的可观察对象，每次控件值发生变化时都会触发回调；调用updateValueAndValidity()会强制指定控件重新执行所有关联的校验规则（包括你绑定的appConfirmEqualValidator密码一致性校验指令），就能实现修改新密码时同步更新确认密码的校验状态。

你原有HTML中的错误提示判断逻辑已经包含了touched状态校验，所以即使用户还没输入过确认密码，也不会提前触发错误提示，符合正常交互逻辑。

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