Question

我一直在寻找很多教程，可以将异步验证器实现为有角度的反应形式，但是我总是会出错。

我需要做的是检查存储在服务中存储的对象数组中存在于字段中的值。

问题是，当我将其与固定值进行比较时，验证器可以正常工作，但是当我尝试使用该服务时，它说该服务未定义。

表单的代码：

ngOnInit() {
 this.FormNuevaConf =this.fb.group({
  'codigo': [null,null],
  'valor': [null,null,this.valorUnicoValidator]
})}

验证者的代码：

valorUnicoValidator (control: AbstractControl, service:UnidadesService): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> {
return of(service.subscribe(control) === control.value).pipe(
  map(result => result ? { invalid: true } : null)
  );}

subscribe(control)是服务中的一个函数，如果在从数据库查询返回的对象数组中找到control.value，则会返回一个值。

如果您有一个异步验证器，我还没有找到明确的解释，您可以推荐我，我将对此表示感谢。

Answer 1

该服务无法注入验证器中，您必须将其作为私有注入组件类的构造函数中，然后在验证器中使用它，因为您可以访问它。

>

类似的东西：

constructor(private service: UnidadesService) {}

ngOnInit() {
  this.FormNuevaConf =this.fb.group({
    'codigo': [null,null],
    'valor': [null,null,this.valorUnicoValidator]
  })
}

valorUnicoValidator (control: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> {
    return of(this.service.subscribe(control) === control.value).pipe(
      map(result => result ? { invalid: true } : null)
);}

Answer 2

如果您的组件具有所需的服务实例的副本，则可以使验证器生成器像这样。

myValidator.validator.ts：

export function MyValidator(service: MyService) {
    return (control: AbstractControl): { [key: string]: any } | null => {
        if (service.getValue()) {
            return { Error: true };
        } else {
            return null;
        }
    };
}

在您的组件中：

this.noteForm.addControl("MyFormContorl", new FormControl(null,
            [Validators.required, MyValidator(this.myService)]));

角异步反应形式验证

2 个答案: