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

Question

我正在使用最新的angular2表单并且正在努力完成这个看起来很简单的任务。我希望有一个自定义验证功能，它能够读取当前组件的属性并根据该属性验证输入。以下是plnkr示例：

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

在此示例中，我有一个始终需要的用户名字段，以及仅在客户是现有客户时才需要的密码字段。

我的表格声明是：

$names = 'jon snow|jon|lana smith|lana|smith|megan';

我的验证功能是：

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

但是，我无法引用验证功能中的当前组件。如果您点击＆＃34;现有客户＆＃34;按钮，您将在控制台中看到错误，即自定义功能被触发且无法找到passwordRequiredForExistingCustomer(control: FormControl): {[key: string]: boolean} { let val = control.value; if (this.state === "existingCustomer" && !val) { return {"required": true}; } return null; } 。

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

谢谢，

哈利

Answer 1

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

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