如何编写依赖于 Angular2 中当前组件的 属性 值的自定义表单验证器（模型驱动）

Question

我正在使用最新的 angular2 表单并努力完成这个看似简单的任务。我想要一个自定义验证函数，它能够读取当前组件的 属性 并基于它验证输入。这是示例 plnkr:

http://plnkr.co/edit/bNFjNsCfhYjoqKaRZgQU?p=preview

在这个例子中，我有一个始终需要的用户名字段和一个仅在客户是现有客户时才需要的密码字段。

我的表单声明是：

this.loginForm = this.formBuilder.group({
  username: ["", Validators.required],
  password: ["", this.passwordRequiredForExistingCustomer]
});

我的验证函数是：

passwordRequiredForExistingCustomer(control: FormControl): {[key: string]: boolean} {
  let val = control.value;
  if (this.state === "existingCustomer" && !val) {
    return {"required": true};
  }

  return null;
}

但是，我无法在我的验证函数中引用当前组件。如果单击 "Existing Customer" 按钮，您将在控制台中看到错误，即触发自定义函数时找不到 this.

我错过了什么吗？我应该采用哪种方法来完成这项任务？

谢谢，

哈利

Answer 1

如果 passwordRequiredForExistingCustomer 是当前组件中的一个方法，将验证器作为箭头函数传递以保持 this.

的范围

this.loginForm = this.formBuilder.group({
  username: ["", Validators.required],
  password: ["", (control) => this.passwordRequiredForExistingCustomer(control)]
});