预期验证器返回 Promise 或 Observable

javascript angular angular5 angular-forms angular-validation

2022-08-30 01:49:45

我正在尝试在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;
}

这种类型的验证是否仅适用于可观察量，或者我可以在不作为承诺或可观察的情况下进行验证？

答案 1

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

.例：

有错误

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

上面一个抛出错误，验证器返回承诺或可观察

修复：

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

解释：

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

FIELD_KEY： [INITIAL_VALUE， [LIST_OF_VALIDATORS]]

答案 2

以下方法应该有效：

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

窗体控件所需的参数如下：

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

与 https://angular.io/api/forms/FormControl 相比