预期的验证器返回Promise或观察者

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

这种验证只适用于可观察到的情况吗？或者我可以在没有promise或可观察的情况下进行验证吗？

Answer 1

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

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

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

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

因此，当忘记对括号进行分组时，Angular假设第二个验证器项是Async验证器的一部分，因此我们得到预期验证器返回Promise或Observable

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

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

。示例：

有错误

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]