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

Question

我想制作自定义验证器，只有当表单中的文本是唯一的时，它才会使提交按钮可用。我有 VulnarabilitiesClass 实例，它包含一个带有 id 和 name 字段的对象数组。在我的表单中输入任何文本后，我收到此错误：错误：未定义不是对象（评估“this.systemVulnarabilities”）

<form [formGroup]="profileForm">
  <label>
    Vulnarability Name:
    <input type="text" formControlName="name" required>
  </label>
</form>

<p>
  Form Status: {{ profileForm.status }}
</p>
<form [formGroup]="profileForm" (ngSubmit)="onSubmit()">
<button type="submit" [disabled]="!profileForm.valid">Submit</button>

this.systemVulnarabilities = new VulnarabilitiesClass();

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

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

Answer 1

发生此错误UniqueNameValidator是因为方法的执行与组件上下文不同this。这样做的原因是在 javascript 上下文中this取决于函数的执行方式而不是声明它的位置。

简单的解决方法是使用Function.prototype.bind方法来确保正确的上下文this

this.UniqueNameValidator.bind(this)

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

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