Angular 如何在自定义验证器中访问组件变量？

我想做一个定制的验证器，只有当表单中的文本是唯一的时，提交按钮才可用。 我有VulnarabilitiesClass实例，它包含一个带有id和name字段的对象数组。 在我的表单中键入任何文本后，出现以下错误： 错误：undefined不是对象（正在评估'this.systemVulnarabilities'）

---

发生此错误的原因是

UniqueNameValidator

方法是使用与组件上下文

This

不同的方法执行的。原因是，在javascript上下文中，这取决于函数的执行方式，而不是声明位置

简单的解决方法是使用确保上下文正确的方法

this

this.UniqueNameValidator.bind(this)

此外，如果您的验证器是同步的，那么您需要将验证器包装在数组中，否则Angular会将其视为异步验证器：

name: ['', [Validators.required, this.UniqueNameValidator.bind(this)]],

另一种“基本”方法是定义函数，如

private UniqueNameValidator(){
  return (control: FormControl)=>{
         ....
  }
}

并添加验证器-请参阅UniqueNameValidator末尾的（）

profileForm = this.fb.group({
    name: ['', Validators.required,this.UniqueNameValidator()],
  });

---

我认为您可以使用闭包并使验证器与变量

systemVulnarabilities

关联，如下所示：

profileForm = this.fb.group({
    name: ['', Validators.required,this.UniqueNameValidator(systemVulnarabilities)],
  });

---

你能展示你的VulnarabilitiesClass代码吗？也许可以展示更多的组件类代码。如果“this.systemVulnarabilities未定义”，则肯定没有正确实例化。

profileForm = this.fb.group({
    name: ['', Validators.required,this.UniqueNameValidator()],
  });

profileForm = this.fb.group({
    name: ['', Validators.required,this.UniqueNameValidator(systemVulnarabilities)],
  });

UniqueNameValidator(systemVulnarabilities): ValidatorFn {
  return (control: FormControl)=>{
    let vulnarabilityName: string = control.value;
  let found: number = systemVulnarabilities.displayList.map(function(e) { return e.name; }).indexOf(vulnarabilityName); //mistake
  if(found === -1){
    return {invalidPassword: 'this name already exists'};
  }
  return null;
  }
}