Promise 또는 Observable을 반환해야 하는 검증자

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

설명:

여러 개의 검증자가 사용되는 경우 두 번째 위치에 배열로 제공될 수 있는 내장형 검증자를 사용하여 수행된 각진 반응형 검증.

필드_키: [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 에서

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

이러한 유형의 오류는 일반적으로 다음과 같은 작업을 수행할 때 발생합니다.

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

상태 false 값을 정의한 후 쉼표(,) 두 개를 사용했습니다.

오른쪽:

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

여러 개의 검증자를 추가할 경우 세 번째 괄호 '[]'를 추가해야 하며 그 안에 검증자를 추가해야 합니다.아래와 같은 항목:

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('')
   }
}

문제는, 만약 그 진술이 거짓이라면 어떻게 될까요?아무것도 반환하지 않으며 런타임 오류가 발생합니다. 타입타입을 하는지 확인)을 추가한 후, 저는 리턴 타입을 합니다.of(true)실패하는 . if-filename은 다음과 .

여기 업데이트된 비동기 검증기가 있습니다.

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

Validators.compose()가 중복됩니다.

배열을 전달할 수 있습니다.OP의 문제는 검증자를 배열로 만들기 위해 []로 래핑하지 못했기 때문에 minLength()는 비동기로 간주되고 오류 메시지가 발생합니다.

이 해결책이 당신에게 도움이 되길 바랍니다.감사해요.

오류: userName:[', [Validators.required,Validators.minLength(3)], 금지된 NameValidator(/password/),

ans: userName:[', [Validators.required, Validators.minLength(3), 금지된 NameValidator(/password/)],

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

제 경우, 같은 문제가 있는 코드를 가지고 있었습니다.

if (this.formGroup.get('client').value) {
  this.isLoading = true;
  return this.usersService.isOrgNameDuplicate(ctrl.value, this.formGroup.get('client').value).pipe(
    map((res) => (this.duplicateLogicCheck(res, ctrl))),
    catchError(() => of(null))
    );
}
return null;

고정 버전

if (this.formGroup.get('client').value) {
  this.isLoading = true;
  return this.usersService.isOrgNameDuplicate(ctrl.value, this.formGroup.get('client').value).pipe(
    map((res) => (this.duplicateLogicCheck(res, ctrl))),
    catchError(() => of(null))
    );
}
return of(null);

변경됨: 변경됨return nullreturn of(null)

언급URL : https://stackoverflow.com/questions/50548062/expected-validator-to-return-promise-or-observable