PromiseまたはObservableを返すと予想されるバリデーター

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

誰かが私を助けることができますか？そのタイプの検証はオブザーバブルでのみ機能しますか、それとも約束やオブザーバブルでなくても実行できますか？ありがとう

これは、配列に複数のバリデーターを追加する必要があることを意味します

。例：

エラーあり

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

上記のものは、バリデーターがPromiseまたはObservableを返すというエラーをスローします

修正：

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

説明：

複数のバリデーターが使用されている場合、2番目の位置に配列で指定できる組み込みのバリデーターを使用して行われる角度リアクティブフォーム検証。

FIELD_KEY：[INITIAL_VALUE、[LIST_OF_VALIDATORS]]

以下が機能するはずです：

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

フォームコントロールが期待する引数は次のとおりです。

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

https://angular.io/api/forms/FormControlから

OPの質問とは直接関係ありませんが、少し異なる問題で同じエラーが発生しました。非同期バリデーターを持っていましたが、そこからObservable（またはPromise）を返すのを忘れていました。

これが私のオリジナルの非同期バリデーターでした

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

問題は、ifステートメントがfalseの場合はどうなるかということです。何も返さず、ランタイムエラーが発生します。戻り値の型を追加し（正しい型を返さない場合にIDEが文句を言うことを確認します）、of(true)if-sentenceが失敗した場合に戻ります。

更新された非同期バリデーターは次のとおりです。

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

Validators.compose（）は冗長です。

配列を渡すだけです。OPの問題は、バリデーターを[]でラップして配列にできないことが原因で発生します。したがって、minLength（）は非同期であると見なされ、エラーメッセージが表示されます。

このソリューションがお役に立てば幸いです。ありがとう。

エラー：userName：[''、[Validators.required、Validators.minLength（3）]、forbiddenNameValidator（/ password /）]、

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

バリデーターは、配列内の2番目のパラメーターのみを使用します。外部アレイ用ではありません

複数のバリデーターを追加する場合は、別の3番目のブラケット「[]」を追加する必要があり、その中にバリデーターを配置する必要があります。以下のように：

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

エラー： "cpf": ["", Validators.required, ValidateCpf]

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

FormControlの作成にリアクティブフォームを使用する場合、initial_valueの後に次の引数がそれぞれ、配列の形式でグループ化された同期バリデーターと非同期バリデーターであるため、受け入れられた回答に加えてエラーが発生することを明確にするのは良いことだと思います。 。例えば：

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

コントロールにいずれか1つしかない場合、Angularはそれを単一の要素として受け入れます。例えば：

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

したがって、それらをグループ化するための角かっこを忘れると、Angularは2番目のバリデーター項目が非同期バリデーターの一部であると想定し、 Expected validator to return Promise or Observable