Angular 8 FormGroup asyn c проверка из вызова API - PullRequest
Новая
       46

Angular 8 FormGroup asyn c проверка из вызова API

0 голосов
/ 17 февраля 2020

Мне нужно проверить Уникальный заголовок продукта, кроме текущего идентификатора продукта.

Обратите внимание, что мне нужно проверить FormGroup с помощью asyn c проверка - вызов службы API .

Функция содержит жестко закодированное значение 2, игнорируйте его.

product-component.ts 

ngOnInit() {
    this.productForm = this.fb.group({
      categoryId: ['', [Validators.required]],
      title: ['', [Validators.required]],
      description: [''],
      oldPrice: ['', [Validators.required, Validators.maxLength(10), Validators.pattern('^\\d+$')]],
      newPrice: ['', [Validators.required, Validators.maxLength(10), Validators.pattern('^\\d+$')]]
}, 
// {validators: ValidateUniqueProductTitle.checkProductTitle(this.productService, 2)}
{asyncValidators: [ValidateUniqueProductTitle.checkProductTitle(this.productService, 2)]}
);

Класс проверки: 

export class ValidateUniqueProductTitle {

public static checkProductTitle(productService: ProductService, productId) {
    return (group: AbstractControl): Observable<ValidationErrors | null> => {
        return productService.checkExisting(group.controls['title'].value, productId)
                            .pipe(
                                debounceTime(200),
                                distinctUntilChanged(),
                                take(1),
                                map((data: boolean) => {
                                    console.log('checkExisting api called', data);
                                    return data ?  {title_exists: true} : null;
                                })
                            ); 
        }
}

Проблема:

Функция проверки класса никогда не вызывается при использовании этой строки:

{asyncValidators:[ValidateUniqueProductTitle.checkProductTitle(this.productService, 2)]}

Когда я использую эту строку, вызывается функция, но API не запускается:

{validators: ValidateUniqueProductTitle.checkProductTitle(this.productService, 2)}

1 Ответ

0 голосов
/ 18 февраля 2020

Это была глупая ошибка. В ответ следует использовать FormGroup вместо Abstract Control.

Класс проверки: 

export class ValidateUniqueProductTitle {

  public static checkProductTitle(productService: ProductService, productId) {
       return (group: AbstractControl): Observable<ValidationErrors | null> => {
            return productService.checkExisting(group.controls['title'].value, productId)
                        .pipe(
                            debounceTime(200),
                            distinctUntilChanged(),
                            take(1),
                            map((data: boolean) => {
                                console.log('checkExisting api called', data);
                                return data ?  {title_exists: true} : null;
                            })
                        ); 
    }
}

Также важно отметить, что:

Asyn c Валидаторы запускаются, только когда все syn c валидаторы возвращают ноль.

Я ожидал всех ошибок валидации (syn c и asyn c) появляться вместе, но этого не происходит.

...