期望验证器返回承诺或可观察

我试图做一个自定义验证角度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;
}

这种类型的验证是否只适用于可观察的情况，或者我可以不做出承诺或可观察的情况下进行验证？

130705 次浏览
小开

以下措施应该奏效:

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

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

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

从 https://angular.io/api/forms/FormControl

小开
最佳答案

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

. 例如:

错误

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

以上一个抛错 返回承诺或可观察的确认程序

解决方案:

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

说明:

在角反应式验证中使用内置的验证器进行验证，验证器可以在第二位阵列中给出，当 使用多个验证器。

FIELD _ KEY: [ Initiial _ VALUE，[ LIST _ OF _ VALIDATORS ]]

小开

Compose ()是多余的;

只需要传递一个数组。OP 的问题是由于未能将验证器包装在[]中使其成为一个数组，因此假定 minLlength ()是异步的，并得到错误消息。

我希望这个解决方案能对你有所帮助。谢谢。

小开

错误: UserName: [”，[ Validators.need，Validators.minLlength (3)] ，forbiddenNameValidator (/password/)] ,

答复: UserName: [”，[ Validators.need，Validators.minLlength (3) ，forbiddenNameValidator (/password/)] ,

验证器只在内部数组中使用第二个参数，而不在外部数组中使用

小开

如果您添加了多个验证器，那么您需要添加第三个括号“[]”，在该括号内，您应该放置验证器。如下:

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

与 OP 的问题没有直接关系，但是我在一个稍微不同的问题上得到了相同的错误。我有一个异步验证器，但是我忘记从它返回一个可观察(或承诺)。

这是我最初的异步验证器

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);
}
小开

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

解决方案: "cpf": ["", [Validators.required, ValidateCpf]]

小开

我认为，除了公认的答案之外，最好还要澄清一下，这个错误之所以会发生，是因为在使用反应式表单创建 FormControl 时，在初始值之后，下面的参数分别是同步验证器和异步验证器，它们分别以数组的形式组合在一起。例如:

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

如果控件碰巧只有其中一个元素，Angular 接受它作为单个元素。例如:

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

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

小开

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

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

把这个换成..

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

第二栏-> 验证程序

小开

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

错:

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

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

右图:

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

提交答案