如何直接从FormControl中获取验证器？

你遇到的核心问题其实是对Angular表单验证机制的小误解——调用formControl.validator(formControl)本身并不会触发statusChanges或更新控件的valid状态，它只是单纯返回当前输入值的验证错误结果。之前的错误提示提前出现，大概率是因为你不小心调用了updateValueAndValidity()，而非仅仅执行验证函数。

正确的实现思路 #

1. 不需要单独存储验证器数组，直接通过FormControl.validator获取组合后的验证器函数
2. 在input事件中，手动调用这个验证器函数获取错误结果，判断是否验证通过
3. 由于控件设置了updateOn: 'blur'，只有在失焦时才会自动更新控件状态，触发statusChanges显示错误，完全符合你的需求

修改后的代码 #

export class AppComponent { 
  public sampleForm: FormGroup; 
  @ViewChild('emailElm') emailElm: ElementRef; 

  ngOnInit() { 
    this.initForm(); 
  } 

  initForm() { 
    const emailValidators = [ 
      Validators.required, 
      Validators.email 
    ]; 
    const emailFC = new FormControl(null, { 
      validators: emailValidators, 
      updateOn: 'blur' // 关键：仅在blur时更新控件状态
    }); 

    this.sampleForm = new FormGroup({ 
      'email': emailFC 
    }); 
    this.initEmailChangeEvent(emailFC); 
    this.initShowErrorMsgEvent(emailFC); 
  } 

  private initEmailChangeEvent(emailFC: FormControl) { 
    fromEvent(this.emailElm.nativeElement, 'input') 
      .pipe(debounceTime(500)) 
      .subscribe((event: Event) => { 
        const currentEmail = (event.target as HTMLInputElement).value; 
        
        // 直接从FormControl获取验证器函数并执行，不更新控件状态
        const validationErrors = emailFC.validator?.(emailFC);
        
        if (validationErrors) {
          console.log('input event:invalid', currentEmail);
          return;
        }

        // 验证通过，调用API
        console.log('input event:call API , email:', currentEmail ); 
      }); 
  } 

  private initShowErrorMsgEvent(fc: FormControl) { 
    fc.statusChanges 
      .subscribe((status) => { 
        if (status === 'INVALID') { 
          console.log('_show error msg by another component'); 
        } 
      }); 
  } 
}

<form [formGroup]="sampleForm"> 
  <input formControlName="email" #emailElm > 
</form>

关键说明 #

• emailFC.validator是Angular自动组合所有验证器后的函数，调用它会返回包含所有验证错误的对象（验证通过则返回null）
• 因为我们没有调用emailFC.updateValueAndValidity()，所以控件的内部状态不会改变，statusChanges不会被触发，错误信息只会在blur时显示
• 保留updateOn: 'blur'配置，确保控件仅在失焦时自动更新状态，完美匹配你的需求

关于“获取原始验证器数组”的补充 #

Angular并没有提供直接获取FormControl中原始验证器数组的API，因为validator属性是组合后的函数。但在你的场景中，我们不需要单独遍历每个验证器——直接调用组合后的验证器函数就能判断整体是否验证通过，这已经完全满足需求。

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