在自定义验证器中传递上下文 this 作为参数

Question

我尝试在自定义异步验证器中传递一个类属性，但当我从该验证器记录它时，它的值仍然总是undefined...

来自 CustomValidators.js：

static isValidPlace(place: Place, controlName: string): AsyncValidatorFn {
    return (control: FormControl): Observable<{ [key: string]: boolean }> => {
      console.log('control', control.value);
      console.log('place', place);

      if (place && place.label !== control.value)
        return Observable.of({ 'invalidPlace': true });

      return Observable.empty();
    }
}

来自组件：

city: FormControl = this.fb.control(
  '', 
  Validators.required, 
  CustomValidators.isValidPlace(this.citySelection, 'city').bind(this)
);

我在触发以下 fn 的字段上附加（更改）事件：

onSelectionCity = (selection: Place): Place => this.citySelection = selection;

---

问题：如何通过我的自定义验证器传递更新后的citySelection 属性？

---

我想做什么：

当用户单击结果列表时，我需要一个 api 发送的 id，该结果列表本身取决于在 formControl（输入）中键入的值。

问题是，当用户更改值时，我必须考虑 formControl 无效，因为验证输入字段的唯一方法是单击列表以获取 id。同时，如果值发生变化，id 变得不正确，我想应用这种行为。

示例：想象一下 Google 搜索引擎与著名的“搜索”按钮稍有不同。 事实上，当您在搜索字段中写入内容时，就会显示一个列表。现在您单击其中一项。

现在想象一秒钟，按钮需要一个 id 来搜索正确的信息，并且这个 id 正在触发 clicks 事件。

您的 id 很好，但是更改文本，输入字段必须无效，因为您之前获得的 id 与您潜在的新搜索要求不同。

我的建议是将包含标签、id 和其他东西selectionCity 保存在我的组件类上的 clicks 事件与 formControl 的实际值进行比较，以通过简单的三重比较来确定有效性。

Answer 1

与其尝试将组件绑定到验证器，不如在 ID 更改后重新创建表单控件或更新其验证器。

onValueChange = () => {
  this.myForm.controls['controlName']
    .clearValidators() 
    .setValidators([
      Validators.required,
      CustomValidators.isValidPlace(this.citySelection, 'city')
  ]);
}