return Promise 或 Observable 的预期验证器

Question

我正在尝试对 Angular 5 进行自定义验证，但遇到以下错误

Expected validator to return Promise or Observable

我只是想 return 如果值不符合要求，则向表单发送错误，这是我的代码：

这是我的表单所在的组件

  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;
}

这种类型的验证是否只适用于可观察对象，或者我可以在没有承诺或可观察对象的情况下进行验证吗？

Answer 1

以下应该有效：

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

表单控件需要的参数如下：

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

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

Answer 2

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

。示例：

有错误

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

上面一个抛出 validator 到 return Promise 或 Observable

的错误

修复：

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

解释：

在 angular 中，当 使用多个验证器时 。

FIELD_KEY: [INITIAL_VALUE, [LIST_OF_VALIDATORS]]

Answer 3

Validators.compose() 是多余的；

你可以只传递一个数组。 OP 的问题是由于未能将验证器包装在 [] 中以使其成为一个数组，因此 minLength() 被认为是异步的并且产生了错误消息。

希望此解决方案对您有所帮助。谢谢。

Answer 4

错误：用户名：['',[Validators.required,Validators.minLength(3)],forbiddenNameValidator(/password/)],

回答：用户名：['',[Validators.required,Validators.minLength(3),forbiddenNameValidator(/password/)]],

验证器仅使用内部数组中的第二个参数。不适用于外部数组

Answer 5

如果你添加多个验证器，那么你需要添加另一个第三个括号'[]'，你应该在其中放置你的验证器。喜欢下面：

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

Answer 6

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

这是我原来的异步验证器

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

问题是，如果 if 语句为假怎么办？我们没有 return 任何东西，我们得到一个运行时错误。我添加了 return 类型（确保 IDE 抱怨如果我们没有 return 正确的类型），然后我 return of(true) 在这种情况下如果句子失败。

这是更新后的异步验证器。

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

Answer 7

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

修复： "cpf": ["", [Validators.required, ValidateCpf]]

Answer 8

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

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

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

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

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

Answer 9

如果你这样做，通常会发生这种类型的错误 -

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

将此更改为 -

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

第二个字段 -> 验证器

Answer 10

你肯定在你的反应形式中定义了多个验证器。

错误：

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

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

对：

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

return Promise 或 Observable 的预期验证器

Expected validator to return Promise or Observable

javascript

angular

angular5

angular-forms

angular-validation