Как превратить функцию в валидатор asyn c для управления формой в Angular8? - PullRequest
Новая
       12

Как превратить функцию в валидатор asyn c для управления формой в Angular8?

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

У меня есть контроль формы типа date, который позволяет пользователю выбрать дату. Я хочу создать asyn c валидатор, который проверяет, существует ли уже представленная дата x раз в моей базе данных. Если это так, предоставьте ошибку в следующем виде: 

order.get('DateOfDelivery').errors?.exists

Я создал эту функцию внутри своего компонента магазина классов (и он работает против моей базы данных. Он возвращает с соответствующим количеством заказов на запрос дата): 

  checkDeliveriesDate(event) {
    console.log(event.target.value);
    let date = { date: event.target.value };
    this.SS.getOrdersPerDate(date).subscribe(
      res => {
        console.log(res);
        /*
        if (res.length>3){
          formcontrol for e should turn invalid 
        }
        else{
          valid
        }
        */
      },
      err => {
        console.log(err);
      }
    )
  }

вот форма управления. Я знаю, что asyn c валидатор должен быть третьим аргументом - 

DateOfDelivery: new FormControl('', Validators.required),/*AsyncValidatorHere*/),

Вот это HTML - 

<input type="date" class="form-control" formControlName="DateOfDelivery" (change)='checkDeliveriesDate($event)'>

Я ценю помощь. Заранее спасибо

Редактировать: 

checkDeliveriesDateValidator(ctrl: AbstractControl) {

  if (!ctrl || String(ctrl.value).length === 0) {
    console.log("!c|| String (c.value).length ===0")
    return null;

  }

  return (ctrl && ctrl.value) ? this.SS.getOrdersPerDate({ date: ctrl.value }).pipe(
    map(res => {
      let deliveriesDate:any=res;
      console.log(deliveriesDate);
      if (deliveriesDate.length>3){ 
        return {exists: true};
      }
      else{
        return null;
      }
    })
  ) : null;
}

Валидатор asyn c выдает эту ошибку-

ОШИБКА TypeError: Невозможно прочитать свойство 'SS' из неопределенного

1 Ответ

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

вы возвращаете наблюдаемое и используете оператор map для преобразования ответа в тип возвращаемого значения валидатора, а также заставляете его ожидать абстрактный аргумент в качестве аргумента, например так: 

 checkDeliveriesDateValidator(ctrl: AbstractControl) {
    // add in basic null checks
    return (ctrl && ctrl.value) ? this.SS.getOrdersPerDate({ date: ctrl.value }).pipe(
      map(res => {
        console.log(res);
        if (res.length>3){
          //formcontrol for e should turn invalid 
          return {exists: true};
        }
        else{
          return null;
        }
      })
    ) : null;
  }

, затем используйте: 

DateOfDelivery: new FormControl('', Validators.required, checkDeliveriesDateValidator)
...