angular4材料表结果错误中的自定义验证器

Question

我正在使用 angular4-material-table 。在那里我尝试添加自定义输入验证 我在那里创建了单独的验证器服务，我调用了自定义函数来根据 api 结果访问我的 api，它会抛出输入是否有效。

这是我的代码，谁能告诉我我犯了什么错误，

import { Injectable } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';
import { ValidatorService } from 'angular4-material-table';
import { AbstractControl } from '@angular/forms';
import { ApiCallService } from 'api.service';

    @Injectable()
    export class MatTableValidatorService implements ValidatorService {
        constructor( private api_call: ApiCallService) {  
        }
       getRowValidator(): FormGroup {
        return new FormGroup({
          'name': new FormControl(null, [Validators.required, this.nameValidator]),
          });
      }
        nameValidator(control: AbstractControl): { [key: string]: boolean } | null {
            this.api_call
            .api_function(parameter)
            .subscribe(data => {
              const arrayVal = data.response;
              if(arrayVal.length > 0)
              {
                return {'dnsCheck': true}
              }
              return null;
          });
            return null;
        }

    }

这个返回错误：无法读取 api_call 的属性，即使我在构造函数中声明了它

还有另一种方式：

   public nameValidator = (control: AbstractControl) => {
         this.api_call
            .api_function(parameter)
            .subscribe(data => {
              const arrayVal = data.response;
              if(arrayVal.length > 0)
              {
                return {'dnsCheck': true}
              }
              return null;
          });
        };

这种方式有效，但即使输入有效或无效，它总是会引发错误。我已经用控制台检查了输出，似乎从 api 得到的结果是完美的。谁能帮助我我的错误是什么。 提前致谢。

A stackblitz example can be seen here.

Answer 1

我不确定这是否是一个原因，但是您并没有等待您的 api 调用的结果。你的代码总是返回null。所以我们需要等待API调用的结果：

async nameValidator(control: AbstractControl): { [key: string]: boolean } | null {  
    const result = await this.api_call.api_function(parameter);
    const arrayVal = result.response;

    if (arrayVal.length > 0)
          return {'dnsCheck': true}

    return null;
}

更新：

您可以添加自定义验证器。禁止名是Mark，如果你写禁止名，那么输入不会保存这个值：

@Injectable()
export class PersonValidatorService implements ValidatorService {
  getRowValidator(): FormGroup {
    return new FormGroup({
      'name': new FormControl(null, [Validators.required, forbiddenNameValidator()])

      });
  }
}

export function forbiddenNameValidator(): ValidatorFn {
  return (control: AbstractControl): {[key: string]: any} | null => {    
    const forbidden =  'Mark';
    console.log(`forbidden name is `, forbidden);
    return (forbidden == control.value) ? {'forbiddenName': {value: control.value}} : null;
  };
}

An example can be seen here.

Answer 2

Angular 自定义验证包含不同的范围，因此您创建的第一个示例不起作用。

第二个示例确实有效，因为您使用了“箭头函数”。 因为您的自定义验证是异步的，所以您需要返回一个 observable。 下面一起来看看

第一个选项：

nameValidator = (control: AbstractControl): Observable<{ [key: string]: boolean } | null> => {
    return this.api_call
        .api_function(parameter)
        .pipe(
            map(
                data => {
                    const arrayVal = data.response;
                    return arrayVal && arrayVal.length > 0 ? { 'dnsCheck': true } : null
                }
            )
        );
}

第二个选项：

this.nameValidator.bind(this) 是魔法发生的地方

getRowValidator(): FormGroup {
    return new FormGroup({
        'name': new FormControl(null, {
            asyncValidators: [this.nameValidator.bind(this)],
            validators: [Validators.required],
        }),
    });
}

nameValidator(control: AbstractControl): Observable < { [key: string]: boolean } | null > {
    return this.api_call
        .api_function(parameter)
        .pipe(
            map(
                data => {
                    const arrayVal = data.response;
                    return arrayVal && arrayVal.length > 0 ? { 'dnsCheck': true } : null
                }
            )
        );
}