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

以下内容应该有效：

  "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)]
};

以上所述引发错误，验证程序返回Promise或Observable

修复：

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

说明：

当使用多个验证器时，通过使用内置验证器（可以在第二位置的数组中给出）进行角反应形式验证。

FIELD_KEY：[INITIAL_VALUE，[LIST_OF_VALIDATORS]]

Answer 3

Validators.compose（）是多余的；

您可以只传递一个数组。 OP的问题是由于未能将验证器包装在[]中以使其成为数组而引起的，因此，假定minLength（）是异步的，并因此而产生错误消息。

我希望，该解决方案能够为您提供帮助。谢谢。

Answer 4

错误： userName：[''，[Validators.required，Validators.minLength（3）]，forbiddenNameValidator（/ password /）]，

ans： userName：[''，[Validators.required，Validators.minLength（3），forbiddenNameValidator（/ password /）]]，

验证器仅在内部数组中使用第二个参数。不适合外部阵列

Answer 5

如果添加多个验证器，则需要添加另一个第三个括号“ []”，并在其中添加验证器。如下所示：

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

Answer 6

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

这是我最初的异步验证器

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

问题是，如果if语句为假，该怎么办？我们不返回任何内容，并且出现运行时错误。我添加了返回类型（确保如果我们不返回正确的类型，IDE会发出抱怨），然后在if语句失败的情况下返回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

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

<script src="https://www.google.com/recaptcha/api.js?render=<cfoutput>#application.SiteKey#</cfoutput>"></script>


<cfif ISDEFINED('FORM.FirstName')> <!--- check if form was submitted and if so run code below --->

    <cfhttp url="https://www.google.com/recaptcha/api/siteverify?secret=#application.SecretKey#&response=#FORM['g-recaptcha-response']#" result="Response" />
    <cfset Return = deserializeJSON(Response.FileContent) />

    <cfif Return.success IS 'true' AND Return.score GT 0.0> <!--- check if true and if score is greater than 0.5. Run code below if all good. --->

        <cfoutput>Human: #FORM.FirstName# #FORM.LastName#</cfoutput>
        <!--- you can do database entry and/or email results here --->

    <cfelse>  <!--- if not a human, do this. I usually remove the else part completely, but if you need to do something with the robot, do it here.  --->

        Most likely a robot.

    </cfif>

<cfelse> <!--- show form --->

    <form method="post" action="/contact.cfm">  <!--- submit form back to itself --->
      First Name: <input name="FirstName" type="text"><br>
      Last Name: <input name="LastName" type="text"><br>
      <input name="submit" type="submit">
      <input name="g-recaptcha-response" id="g-recaptcha-response" type="hidden" /> <!--- javascript below gives this a value from google. --->
    </form>

    <script>
    grecaptcha.ready(function() {
        grecaptcha.execute('<cfoutput>#application.SiteKey#</cfoutput>', {action: 'homepage'})
            .then(function(token) {
                document.getElementById('g-recaptcha-response').value=token;
            });
        });
    </script>

</cfif>

将其更改为 -

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

第二个字段 -> 验证器

返回Promise或Observable的预期验证器

9 个答案: