Trình xác thực mong đợi trả lại Lời hứa hoặc Có thể quan sát được

Tôi đang cố gắng thực hiện xác thực tùy chỉnh trên Angular 5 nhưng tôi gặp phải lỗi sau

Expected validator to return Promise or Observable

Tôi chỉ muốn trả lại lỗi cho biểu mẫu nếu giá trị không khớp với yêu cầu, mã của tôi là:

Đây là thành phần mà biểu mẫu của tôi

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

Mã này có trong tệp với xác thực mà tôi muốn triển khai:

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

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

Ai đó có thể giúp tôi? Loại xác thực đó chỉ hoạt động với những người có thể quan sát được hay tôi có thể thực hiện mà không phải là một lời hứa hoặc có thể quan sát được? cảm ơn

Có nghĩa là bạn phải thêm nhiều trình xác thực trong mảng

. Thí dụ:

Có lỗi

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

Trên một lỗi ném ra trình xác thực để trả về Lời hứa hoặc Có thể quan sát được

Sửa chữa:

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

Giải trình:

Trong xác thực biểu mẫu Phản ứng góc được thực hiện bằng cách sử dụng trình xác thực có sẵn có thể được cung cấp trong mảng ở vị trí thứ 2, khi nhiều trình xác thực được sử dụng .

FIELD_KEY: [INITIAL_VALUE, [LIST_OF_VALIDATORS]]

Những điều sau sẽ hoạt động:

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

các đối số mà điều khiển biểu mẫu mong đợi như sau:

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

từ https://angular.io/api/forms/FormControl

Không liên quan trực tiếp đến câu hỏi của OP, nhưng tôi đã gặp lỗi tương tự về một vấn đề hơi khác. Tôi đã có một trình xác thực không đồng bộ, nhưng tôi quên trả về một Trình xác thực có thể quan sát (hoặc Lời hứa) từ nó.

Đây là trình xác thực không đồng bộ ban đầu của tôi

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

Vấn đề là, nếu câu lệnh if là sai thì sao? Chúng tôi không trả lại bất kỳ thứ gì và chúng tôi gặp lỗi thời gian chạy. Tôi đã thêm kiểu trả về (đảm bảo IDE sẽ khiếu nại nếu chúng tôi không trả lại đúng kiểu), và sau đó tôi quay lại of(true)trong trường hợp câu if không thành công.

Đây là trình xác thực không đồng bộ được cập nhật.

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

Validators.compose () là dư thừa;

Bạn chỉ có thể chuyển một mảng. Sự cố của OP là do không thể bọc các trình xác thực trong [] để biến chúng thành một mảng, do đó minLength () một được giả định là không đồng bộ và kết quả là thông báo lỗi.

Tôi hy vọng, giải pháp này sẽ giúp bạn. Cảm ơn.

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

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

trình xác thực chỉ sử dụng tham số thứ hai trong mảng bên trong. không dành cho mảng bên ngoài

Nếu bạn thêm nhiều trình xác thực, thì bạn cần thêm một dấu ngoặc thứ ba khác '[]' và bên trong đó, bạn nên đặt trình xác thực của mình. Như bên dưới:

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

Lỗi: "cpf": ["", Validators.required, ValidateCpf]

Sửa chữa: "cpf": ["", [Validators.required, ValidateCpf]]

Tôi nghĩ tốt hơn là bạn nên làm rõ ngoài câu trả lời được chấp nhận rằng lỗi xảy ra vì khi sử dụng các biểu mẫu phản ứng để tạo FormControl, sau giá trị ban đầu, các đối số sau đây tương ứng là trình xác thực đồng bộ và trình xác thực không đồng bộ được nhóm lại dưới dạng một mảng. . Ví dụ:

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

Nếu điều khiển xảy ra chỉ có một trong hai, Angular chấp nhận nó như một phần tử duy nhất. Ví dụ:

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

Do đó, khi quên dấu ngoặc để nhóm chúng Angular giả sử mục trình xác thực thứ hai là một phần của trình xác nhận Async và do đó chúng tôi nhận được Expected validator to return Promise or Observable