Блог

Главная - Вопросы по программированию - Угловые реактивные формы проверяют существующий номер

Угловые реактивные формы проверяют существующий номер

#angular #angular-reactive-forms

Вопрос:

У меня есть таблица в моем приложении angular, где я храню некоторые данные (пользователи, электронная почта и т. Д.), Я могу добавлять новых пользователей , и в моей форме есть поле ввода , в котором я могу ввести номер важности (1, 2, 3 и т. Д.), И, конечно, должно быть только одно из каждого числа. Я хочу показать сообщение об ошибке, если введенный номер уже существует в моей базе данных. Есть ли способ использовать валидатор для его проверки?

Комментарии:

1. Вы имеете в виду асинхронный валидатор ?

2. Используйте асинхронный валидатор angular.io/api/forms/AsyncValidator . Если возникнут какие-либо проблемы, поделитесь своим кодом

3. это то, что я искал, спасибо, я попробую

Ответ №1:

Вам следует добавить пользовательский асинхронный валидатор.

Следующий код создает класс валидатора CheckIfNumberExistsValidator, который реализует интерфейс AsyncValidator.

 @Injectable({ providedIn: 'root' })
export class CheckIfNumberExistsValidator implements AsyncValidator {
  constructor(private numbersService: NumbersService) {}

  validate(
    ctrl: AbstractControl
  ): Promise<ValidationErrors | null> | Observable<ValidationErrors | null> {
    return this.numbersService.isNumberTaken(ctrl.value).pipe(
      map(isTaken => (isTaken ? { uniqueNumber: true } : null)),
      catchError(() => of(null))
    );
  }
}

Ваша форма должна выглядеть так:

 this.yourForm = new FormGroup({
  number: new FormControl(0, {
        asyncValidators: [this.CheckIfNumberExistsValidator.validate.bind(this.CheckIfNumberExistsValidator )],
        updateOn: 'blur' // You can delay updating the form validity
      }),
});

Служба NumbersService будет отвечать за выполнение HTTP — запроса к базе данных numbers.

Этот метод возвращает значение null, если форма допустима, и ошибки проверки, если это не так.

Примечание: Не забудьте ввести CheckIfNumberExistsValidator

Для получения дополнительной информации проверьте: https://angular.io/guide/form-validation#implementing-a-custom-async-validator

Метки: