Angular12实现异步校验器时报Cannot read property 'userService' of undefined如何解决

报错原因 #

你遇到的Cannot read property 'userService' of undefined报错是函数this指向丢失导致的：
当你直接把this.validate作为异步校验器传入FormControl时，Angular在校验触发时会以全局上下文执行这个函数，此时函数内部的this不再指向你的组件实例，自然无法获取挂载在组件实例上的userService属性。你能正常打印control.value是因为该值是函数入参，不需要访问this属性，直到执行this.userService逻辑时才会触发报错。

解决方法 #

以下两种方案任选其一即可：

方案1：绑定校验器的this指向为组件实例 #

在ngOnInit中声明FormGroup时，用bind方法把validate方法的this绑定到当前组件：

ngOnInit(): void {
 this.form = this.fb.group({
      // 给validate方法绑定当前组件的this上下文
      userId: ['', [Validators.required],[this.validate.bind(this)]]})
}

方案2：把校验函数改成箭头函数 #

箭头函数不会生成自身的this，会继承定义时所在上下文的this，天然指向组件实例：

// 把普通函数修改为箭头函数
validate = (control: AbstractControl): Observable<ValidationErrors | null> => {
    console.log(control.value);
    return of(control.value)
      .pipe(
        delay(10),
        switchMap((value) =>
          this.userService.getUserIdToCheckDuplicate(value).pipe(map(x => {
            return x.exists ? { exists: true } : null;
          }))
        )
      );
}

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