将此上下文作为自定义验证器中的参数传递

debugcn 发表于 Dev

凯文·维莱拉·平托

我尝试在自定义异步验证器中传递一个类属性，但是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保存在我的组件类上的点击事件中的其他内容的完整对象与 formControl 的实际值进行比较，以通过简单的三重比较来确定有效性。

用户4676340

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

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

本文收集自互联网，转载请注明来源。

如有侵权，请联系[email protected] 删除。