返回Promise或Observable的预期验证器

Question

我试图在Angular 5上进行自定义验证,但我面临以下错误

Expected validator to return Promise or Observable

我只想在表单中返回错误,如果值与所需的值不匹配,那么我的代码是:

这是我的表单所在的组件

  constructor(fb: FormBuilder, private cadastroService:CadastroService) {
    this.signUp = fb.group({
      "name": ["", Validators.compose([Validators.required, Validators.minLength(2)])],
      "email": ["", Validators.compose([Validators.required, Validators.email])],
      "phone": ["", Validators.compose([Validators.required, Validators.minLength(5)])],
      "cpf": ["", Validators.required, ValidateCpf]
    })     
   }

此代码在我想要实现的验证的文件中:

import { AbstractControl } from '@angular/forms';

export function ValidateCpf(control: AbstractControl){
    if (control.value == 13445) {
        return {errorCpf: true}
    }
    return null;
}

有人能帮我吗？这种类型的验证只适用于observables,还是我能做到而不是一个承诺或可观察的？谢谢

Answer 1

这意味着您必须在数组中添加多个验证器

。例：

有错误

profileFormGroup = {
  budget: [null, Validators.required, Validators.min(1)]
};

上面的一个引发验证者返回Promise或Observable的错误

固定：

profileFormGroup = {
  budget: [null, [Validators.required, Validators.min(1)]]
};

说明：

在角反应式验证中，使用多个验证器时，可以使用内置验证器完成验证，该验证器可以在第二个位置以数组形式给出。

FIELD_KEY：[INITIAL_VALUE，[LIST_OF_VALIDATORS]]

Answer 2

以下应该有效:

  "cpf": ["", [Validators.required, ValidateCpf]]

表单控件期望的参数如下:

constructor(formState: any = null, 
            validatorOrOpts?: ValidatorFn | ValidatorFn[] | AbstractControlOptions | null,
            asyncValidator?: AsyncValidatorFn | AsyncValidatorFn[] | null)

来自https://angular.io/api/forms/FormControl

Answer 3

我认为除了接受的答案之外，最好澄清一下错误的发生，因为当使用反应式表单创建 FormControl 时，在initial_value 之后，以下参数分别是同步验证器和异步验证器，它们分别以数组的形式分组。例如：

\n\n

myFormGroup = this.fb.group({\n    myControl: ['', [ mySyncValidators\xc2\xa0], [ myAsyncValidators\xc2\xa0] ]\n})\n

\n\n

如果控件碰巧只有其中之一，Angular 会将其作为单个元素接受。例如：

\n\n

myFormGroup = this.fb.group({\n    myControl: ['', mySyncValidator, myAsyncValidator ]\n})\n

\n\n

因此，当忘记对它们进行分组的括号时，Angular 假设第二个验证器项是异步验证器的一部分，因此我们得到Expected validator to return Promise or Observable

\n

Answer 4

您肯定以反应形式定义了多个验证器。

错误的 ：

'status': [false,,[Validators.required]]

我只是在定义 status false 的值后使用了两个逗号(,) 。

正确的 ：

 'status': [false,[Validators.required]]

Answer 5

如果您执行以下操作，通常会发生此类错误 -

name: ['',Validators.required, Validators.compose([Validators.minLength(3),Validators.maxLength(15)])]

将其更改为 -

name: ['', Validators.compose([Validators.required,Validators.minLength(3),Validators.maxLength(15)])]

第二个字段 -> 验证器

Answer 6

如果您添加多个验证器，那么您需要添加另一个第三个括号“[]”，并在其中放置您的验证器。像下面这样：

this.yourForm= this.formBuilder.group({
    amount: [null, [Validators.required, Validators.min(1)]],
});

Answer 7

与OP的问题没有直接关系，但我在一个略有不同的问题上遇到了相同的错误。我有一个异步验证器，但我忘记从中返回一个 Observable（或 Promise）。

这是我原来的异步验证器

public availableEmail(formControl: FormControl) {
   if(formControl && formControl.value){
     return this.http.get('')
   }
}

问题是，如果 if 语句为假怎么办？我们不会返回任何内容，并且会收到运行时错误。我添加了返回类型（确保如果我们没有返回正确的类型，IDE 会发出抱怨），然后我会返回，of(true)以防 if 语句失败。

这是更新的异步验证器。

public availableEmail(formControl: FormControl): Observable<any> {
   if(formControl && formControl.value){
     return this.http.get('someUrl');
   }
   return of(true);
}

Answer 8

错误： "cpf": ["", Validators.required, ValidateCpf]

使固定： "cpf": ["", [Validators.required, ValidateCpf]]