Добавить asyn c валидатор в FormControl динамически - PullRequest
Новая
       0

Добавить asyn c валидатор в FormControl динамически

0 голосов
/ 14 января 2020

Я делаю веб-приложение в Angular 8. У меня есть форма с одним вводом для ввода 5-значного числа (в виде строки). Я хочу проверить, что это число уникально в базе данных.

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

brand: Brand;
raffle: Raffle;

constructor(
    private brandService: BrandService,
    private fb: FormBuilder,
  ) {
    this.gambleForm = fb.group({
      number: ['', [ // Default validators
        Validators.required,
        Validators.minLength(5),
        Validators.maxLength(5),
      ]]
    });
  }

ngOnInit() {
    const id = this.route.snapshot.paramMap.get('id');
    this.getBrandData(id);
  }

getBrandData(id: string) {
    this.brandService.getBrandById(id).subscribe(res => {
      this.brand = res;
      this.getRaffleData();
    });
  }

getRaffleData() {
    this.brandService.getLastRaffleOpen(this.brand.id)
      .subscribe(res => {
        this.raffle = res;
        // Adding validators dynamically
        this.gambleForm.get('number').setValidators([
          // Returns a compose validator containing all previously defined validators.
          this.gambleForm.get('number').validator,
          // Async validator
          CustomValidator.numberCanBePlayed(
            this.brandService.getFirestore(),
            this.brand.id,
            this.raffle.id
          )
        ]);
      });
  }

Прямо сейчас мой валидатор asyn c не работает, потому что, согласно тому, что я прочитал, Я назначаю его как валидатор syn c вместо asyn c. Как правильно назначить валидатор asyn c? Я назначу его позже, потому что мне нужно передать несколько переменных в валидатор asyn c, которые недоступны внутри конструкции формы.

Моя цель - назначить асин c валидатор динамически.

Ответы [ 2 ]

1 голос
/ 14 января 2020

FormControl имеет специальный метод для этого: setAsyncValidators: https://angular.io/api/forms/AbstractControl#setAsyncValidators

0 голосов
/ 14 января 2020

Вы можете попробовать это, когда у вас есть ошибка из бэкэнда и использовать setErrors в соответствующем formControl, вот пример, чтобы проверить, принято письмо или нет 

subscribe((data) => {// do control here},
   error => { 
    if(error.status === 400 && error.error.errors.email) {
      const emailFormControl = this.accountForm.get('email');
      if (emailFormControl) {
      // activate the error message
      emailFormControl.setErrors({
        serverError: 'Email exist déjà!'
      });
     }
    }
});

и вы можете показать ошибку в шаблоне, как это 

<mat-error *ngIf="accountForm.get('email').errors?.serverError">
              {{ accountForm.get('email').errors?.serverError }}
</mat-error>
...