Angular AsyncValidator не работает, как я хотел - PullRequest
Новая
       5

Angular AsyncValidator не работает, как я хотел

0 голосов
/ 04 апреля 2020

Я не впервые использую AsyncValidator, но на этот раз я пытаюсь создать что-то более сложное. Я строю веб-сайт банка. В моем проекте у каждого пользователя есть несколько учетных записей.

В моей форме есть две области ввода:

  • Input-1 принимает имя пользователя.
  • Input-2 принимает номер счета.

Я хочу взять имя пользователя из Input-1 и найти учетные записи, которые есть у пользователя, и я хочу выдать ошибку для Input-2, если номер счета в Input-2 не является одним из учетные записи пользователя.

Angular V8

Как на этой фотографии ...

enter image description here

Это валидатор: 

import { Directive, Input } from '@angular/core';
import { AsyncValidator, ValidationErrors, AbstractControl, NG_ASYNC_VALIDATORS } from '@angular/forms';
import { Observable, Subscription, of } from 'rxjs';
import { UserService } from '../service/user.service';
import { map, take, switchMap, tap } from 'rxjs/operators';
import { AccountService } from '../service/account.service';

@Directive({
  selector: '[transferAccountid]',
  providers: [{ provide: NG_ASYNC_VALIDATORS, useExisting: TransferAccountidValidatorDirective, multi: true }]
})
export class TransferAccountidValidatorDirective implements AsyncValidator {
  @Input('transferAccountid') controlUsername: string;

  constructor(private userService: UserService, private accountService: AccountService) { }

  validate(c: AbstractControl): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> {
    const username = c.root.get(this.controlUsername);
    let id: number;

    if (username) {
      return this.userService.getUserByUsername(username.value).pipe(
        switchMap(user => {
          if (user[0] != null) {
            id =  user[0].id;
            return this.accountService.getAccountsByUser(id)
              .pipe(
                map(accounts => {
                  return accounts.map(account => {
                    console.log("AccountId: " ,account.id);
                    return account.id === c.value ? null : {'transferAccountid': true}
                  })
                })
              );
          } else { return new Observable<null>(); }
        })
      );
    }
  }
}

Заранее спасибо.

Вот ссылка Stackblitz ...

...