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

설명:

여러 유효성 검사기가 사용 된 경우 두 번째 위치에 배열로 제공 될 수있는 내장 유효성 검사기를 사용하여 수행되는 각도 반응 양식 유효성 검사에서 .

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 문이 거짓이면 어떨까요? 아무것도 반환하지 않고 런타임 오류가 발생합니다. 반환 유형을 추가하고 (올바른 유형을 반환하지 않으면 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 /)]],

유효성 검사기는 내부 배열에서 두 번째 매개 변수 만 사용합니다. 외부 어레 이용 아님

여러 유효성 검사기를 추가하는 경우 세 번째 대괄호 '[]'를 추가해야하며 그 안에 유효성 검사기를 배치해야합니다. 아래와 같이 :

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

컨트롤에 둘 중 하나만 있으면 Angular는이를 단일 요소로 받아들입니다. 예 :

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

따라서 그룹화를위한 대괄호를 잊었을 때 Angular는 두 번째 유효성 검사기 항목이 비동기 유효성 검사기의 일부라고 가정하므로 Expected validator to return Promise or Observable