Validator yang diharapkan mengembalikan Promise atau Observable

Saya mencoba melakukan validasi khusus pada Angular 5 tetapi saya menghadapi kesalahan berikut

Expected validator to return Promise or Observable

Saya hanya ingin mengembalikan kesalahan ke formulir jika nilainya tidak sesuai dengan yang diperlukan, inilah kode saya:

Ini adalah komponen dimana formulir saya

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

Kode ini ada di dalam file dengan validasi yang ingin saya terapkan:

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

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

Bisakah seseorang membantu saya? Apakah jenis validasi hanya berfungsi dengan yang dapat diamati atau dapatkah saya melakukannya tanpa menjadi janji atau dapat diamati? Terima kasih

Artinya Anda harus menambahkan beberapa validator dalam array

. Contoh:

Dengan Error

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

Di atas satu kesalahan melempar validator untuk mengembalikan Promise atau Observable

Memperbaiki:

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

Penjelasan:

Validasi bentuk Reaktif bersudut dilakukan dengan menggunakan validator built-in yang dapat diberikan dalam array pada posisi ke-2, jika digunakan beberapa validator .

FIELD_KEY: [INITIAL_VALUE, [LIST_OF_VALIDATORS]]

Berikut ini seharusnya bekerja:

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

argumen yang diharapkan oleh kontrol formulir adalah sebagai berikut:

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

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

Tidak terkait langsung dengan pertanyaan OP, tetapi saya mendapat kesalahan yang sama pada masalah yang sedikit berbeda. Saya memiliki validator async, tetapi saya lupa mengembalikan Observable (atau Promise) darinya.

Ini adalah validator asinkron asli saya

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

Masalahnya, bagaimana jika pernyataan-if salah? Kami tidak mengembalikan apa pun, dan kami mendapatkan error runtime. Saya menambahkan tipe pengembalian (memastikan IDE mengeluh jika kami tidak mengembalikan tipe yang benar), dan kemudian saya mengembalikan of(true)jika kalimat gagal.

Berikut adalah validator asinkron yang diperbarui.

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

Validators.compose () redundan;

Anda bisa melewatkan array. Masalah OP disebabkan oleh kegagalan untuk membungkus validator dalam [] untuk menjadikannya sebuah array, maka minLength () diasumsikan async dan pesan kesalahan yang dihasilkan.

Saya harap, solusi ini akan membantu Anda. Terima kasih.

kesalahan: userName: ['', [Validators.required, Validators.minLength (3)], ForbiddenNameValidator (/ password /)],

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

validator hanya menggunakan parameter kedua di dalam array. bukan untuk larik luar

Jika Anda menambahkan beberapa validator, maka Anda perlu menambahkan tanda kurung ketiga '[]' dan di dalamnya, Anda harus meletakkan validator Anda. Seperti Di Bawah Ini:

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

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

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

Saya pikir itu baik untuk mengklarifikasi selain jawaban yang diterima bahwa kesalahan terjadi karena saat menggunakan formulir reaktif untuk membuat FormControl, setelah initial_value, argumen berikut adalah, masing-masing, validator sinkron dan validator asinkron dikelompokkan dalam bentuk array masing-masing . Misalnya:

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

Jika kontrol kebetulan hanya memiliki salah satu dari keduanya, Angular menerimanya sebagai elemen tunggal. Misalnya:

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

Oleh karena itu, ketika melupakan tanda kurung untuk mengelompokkannya, Angular mengasumsikan item validator kedua adalah bagian dari validator Async sehingga kita mendapatkan Expected validator to return Promise or Observable