Angular 2自定义验证不在组件函数内部调用

Question

我正在尝试使用自定义验证器查找重复的经销商名称。经销商名称数据来自网络服务。我有经销商服务来获取经销商数据。我正在使用它在组件内的 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;
          }

        }
      }
     });
  }

);
 }

Answer 1

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

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 validator 等待或 Promise 或 Observable 并且您只返回 forEach 内的 null | errorObj，其中一个没有做任何事情.

解决方案：

您可以使用 map 运算符代替 subscribe（或者如果您愿意，可以使用 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 的所有键（就像您正在做的那样），因为您只想比较 @987654342 @。

6（小错误）-您在retrun null; 中有错字，应该是return null; :)。

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

---

提示：

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

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

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

样本：

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

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

FULL DEMO