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

【问题标题】：How can I reach component variables in custom validator?如何在自定义验证器中访问组件变量？
【发布时间】：2019-07-08 11:07:27
【问题描述】：

我想制作自定义验证器，该验证器仅在表单中的文本唯一时才使提交按钮可用。我有 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;
}

【问题讨论】：

你能显示你的漏洞类代码吗？
可能会显示更多的组件类代码。如果“this.systemVulnarabilities is undefined”肯定没有正确实例化。

标签： angular forms validation

【解决方案1】：

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

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

this.UniqueNameValidator.bind(this)

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

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

【讨论】：

【解决方案2】：

另一种“经典”方式是定义函数

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

并添加验证器 - 参见 UniqueNameValidator 末尾的 ()

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

【讨论】：

【解决方案3】：

我认为您可以使用闭包并使用变量systemVulnarabilities 使您的验证器与上下文相关，如下所示：


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;
  }
}

【讨论】：