0

我正在尝试使用自定义验证器查找重复的经销商名称。经销商名称数据来自网络服务。我有经销商服务来获取经销商数据。我正在使用它在组件内的 validDelarName 函数处进行经销商重复验证。我在 FromGroup Validators 上声明它，但它没有被调用。

Form Group Validator - declare

name: ['', Validators.compose([Validators.required, Validators.maxLength(128),Validators.pattern('[a-zA-Z0-9\\s\\-\\,\\.\\&\\(\\)]+'),(control:FormControl)=>this.validDelarName])],

验证功能。它也存在于组件中。

 validDelarName(FormControl){   
  const dealer = this.dealer.getviewdealer().subscribe( //getting data using webservices
  (data) => {       
     data.forEach(items => {
      for (var key in items) {
        if (items.hasOwnProperty(key)) {

          if(control.value == items['dealername']){
            return {valid:true;}
          }
          else{
            retrun null;
          }

        }
      }
     });
  }

);
 }
4

1 回答 1

3

首先，你的代码有很多错误，我们列举一下：

1 - 由于您的自定义验证器validDelarName是async，它必须作为第三个。参数，像这样：

name: [
  '', 
  [
    Validators.required, 
    Validators.maxLength(128),
    Validators.pattern('[a-zA-Z0-9\\s\\-\\,\\.\\&\\(\\)]+')
  ],
  (control: AbstractControl) => this.validDelarName // Fix later
]

2 - 您必须将控件或上下文传递给您的自定义验证器，如下所示：

(control: AbstractControl) => this.validDelarName(control)

或者，如果您愿意：

this.validDelarName.bind(this)

3 -validDelarName的签名是错误的，它必须是这样的：

validDelarName(control: AbstractControl) { ... }

4 -async 验证器等待或 aPromise或 anObservable并且您仅null | errorObj在 内部返回forEach，其中一个没有做任何事情。

解决方案：

而不是subscribe你可以使用map操作符（或者如果你愿意，你可以使用 Promise）并让 Angular 完成他的工作。

要搜索您的特定值，array我建议您使用Array#some。如果在数组中找到键入的文本，它将返回 true 并自动停止循环，否则将返回 false。

基于此，您可以返回错误 object或 null，如下所示：

validDelarName(control: AbstractControl) {
  return this.dealer.getviewdealer().map(data => {
    const hasItem: boolean = data.some(item => control.value === item['dealername']);

    return hasItem ? { valid: true } : null;
  });
}

5 - 正如您在上面看到的，您不需要遍历data object的所有键（就像您正在做的那样），因为您只想比较dealername.

6（小错误） - 你有一个错字retrun null;，应该是return null;:)。

7（归功于@yurzui）-return {valid:true;} should be return { valid: true };

提示：

1 -Validators.compose不需要，您可以array在两个参数（第二个和第三个）中传递一个，或者如果它是单个验证器，验证器本身。

2 -Validators.pattern接受 a RegExp，因此您可以使用它。

为什么？而不是用双斜杠转义符号，你可以只转义一个斜杠和 IMO，它更具可读性。

样品：

Validators.pattern(/^[a-zA-Z0-9\s-\,\.&\(\)]+$/)

另外，请注意，并非此处的所有符号都需要转义（我去掉了不需要的转义）。

完整演示

于 2017-06-17T18:53:47.833 回答