Angular表单使用外部服务验证时出现auth未定义错误求助

这个错误我之前也碰到过，核心原因是函数上下文丢失了。当你直接把this.validator.username作为验证器传给表单控件时，Angular调用这个验证器函数的时候，并没有保留它原本在ValidatorService实例中的this指向——也就是说，username方法里的this不再指向ValidatorService的实例，自然就找不到auth属性了。

给你几个可行的解决办法：

• 用箭头函数包裹验证器调用
  在组件创建表单的时候，用箭头函数来包装你的验证器方法，这样能确保this的上下文正确：

  this.myForm = this.fb.group({ 
    username: ['', [input => this.validator.username(input)]] 
  });
  

  箭头函数会捕获当前组件中的this，调用this.validator.username时，方法内部的this就会正确指向ValidatorService实例。

• 把验证器方法改成箭头函数
  直接在ValidatorService里把username方法定义成箭头函数，这样方法本身就绑定了实例的this，不管怎么调用都不会丢上下文：

  @Injectable()
  export class ValidatorService {
   constructor(private auth: AuthService) {}
   // 改用箭头函数定义方法
   username = (input: FormControl): {[key: string]: any} => {
     return { userInvalid: this.auth.validate(input.value) };
   }
  }
  

  这种方式比较一劳永逸，之后在组件里直接传this.validator.username就没问题了。

• 用bind手动绑定上下文
  如果你不想改方法定义，也可以用bind方法手动把this绑定到ValidatorService实例上：

  this.myForm = this.fb.group({ 
    username: ['', [this.validator.username.bind(this.validator)]] 
  });
  

  bind会返回一个新函数，这个函数的this被固定为你传入的this.validator，调用时就能正确访问this.auth了。

另外别忘了确认一下：你的ValidatorService和AuthService都已经在Angular模块的providers数组里正确注册了，不然即使上下文对了，也会出现注入失败的问题哦。

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