Doğrulayıcının Promise veya Observable döndürmesi bekleniyor

Angular 5'te özel bir doğrulama yapmaya çalışıyorum ama şu hatayla karşılaşıyorum

Expected validator to return Promise or Observable

Değer gerekli olanla eşleşmiyorsa forma bir hata döndürmek istiyorum, kodum burada:

Bu, formumun olduğu bileşen

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

Bu kod, uygulamak istediğim doğrulamaya sahip dosyada:

import { AbstractControl } from '@angular/forms';

export function ValidateCpf(control: AbstractControl){
    if (control.value == 13445) {
        return {errorCpf: true}
    }
    return null;
}

Biri bana yardım edebilir mi? Bu tür bir doğrulama yalnızca gözlemlenebilirlerle mi çalışır, yoksa bir söz veya gözlemlenebilir olmadan yapabilir miyim? Teşekkürler

Bu , diziye birden çok doğrulayıcı eklemeniz gerektiği anlamına gelir

. Misal:

Hatalı

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

Yukarıdakilerden biri, doğrulayıcının Promise veya Observable döndürmesi için hata verir

Düzeltme:

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

Açıklama:

Açısal Reaktif form doğrulama, çoklu doğrulayıcı kullanıldığında 2. pozisyonda dizide verilebilen yerleşik doğrulayıcılar kullanılarak yapılır .

FIELD_KEY: [INITIAL_VALUE, [LIST_OF_VALIDATORS]]

Aşağıdakiler çalışmalıdır:

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

form kontrolünün beklediği argümanlar şunlardır:

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

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

Doğrudan OP'nin sorusuyla ilgili değil, ancak biraz farklı bir problemde aynı hatayı aldım. Eşzamansız bir doğrulayıcım vardı, ancak ondan bir Gözlemlenebilir (veya Söz) iade etmeyi unuttum.

Orijinal eşzamansız doğrulayıcım buydu

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

Mesele şu ki, eğer if ifadesi yanlışsa? Hiçbir şey döndürmüyoruz ve bir çalışma zamanı hatası alıyoruz. Dönüş türünü ekledim (doğru türü döndürmezsek IDE'nin şikayet ettiğinden emin olduktan sonra) ve sonra of(true)if cümlesinin başarısız olması durumunda geri dönüyorum.

İşte güncellenmiş eşzamansız doğrulayıcı.

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

Validators.compose () gereksizdir;

Sadece bir dizi geçirebilirsiniz. OP'nin problemi, doğrulayıcıları [] dizisine sararak onları bir dizi haline getirememekten kaynaklanır, dolayısıyla minLength () birinin asenkron olduğu varsayılır ve sonuçta ortaya çıkan hata mesajı.

Umarım bu çözüm size yardımcı olur. Teşekkürler.

error: userName: ['', [Validators.required, Validators.minLength (3)], forbiddenNameValidator (/ password /)],

ans: userName: ['', [Validators.required, Validators.minLength (3), forbiddenNameValidator (/ password /)]],

doğrulayıcılar, dizi içinde yalnızca ikinci parametre kullanır. dış dizi için değil

Birden fazla doğrulayıcı eklerseniz, başka bir üçüncü köşeli parantez '[]' eklemeniz ve bunun içine doğrulayıcılarınızı koymanız gerekir. Aşağıdaki gibi:

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

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

Düzeltme: "cpf": ["", [Validators.required, ValidateCpf]]

Kabul edilen yanıta ek olarak hatanın oluştuğunu açıklığa kavuşturmanın iyi olacağını düşünüyorum çünkü bir FormControl oluşturmak için reaktif formlar kullanılırken, ilk_değerden sonra aşağıdaki bağımsız değişkenler sırasıyla eşzamanlı doğrulayıcılar ve her biri bir dizi biçiminde gruplanmış zaman uyumsuz doğrulayıcılardır. . Örneğin:

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

Denetimde bunlardan yalnızca biri varsa, Angular bunu tek bir öğe olarak kabul eder. Örneğin:

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

Bu nedenle, onları gruplamak için parantezleri unuttuğumuzda, Angular, ikinci doğrulayıcı öğesinin Asenkron doğrulayıcıların bir parçası olduğunu varsayar ve böylece Expected validator to return Promise or Observable