Как передать значения в валидатор, чтобы сохранить сервисный вызов в angular 5?

Question

У меня есть следующий код из файла ts (компонента):

  ngOnInit() {
    this.getTripNames();
    }

   getInstruments() {
    this.tripService.getTripNames().subscribe(
      data => { this.tripNames = data; }, 
      err => console.error(err),
      () => 
            console.log(this.trips)          
      );
    }

   ngAfterViewInit() {
    this.tripForm = new FormGroup ({
      newTripName: new FormControl('', {
        validators:  Validators.compose([
        Validators.required,
        Validators.minLength(3),        
        ValidateTrip.createValidator(this.tripNames)
        ]),      
        updateOn: 'blur'
      })
    });

    }

Как вы можете видеть, поездки извлекаются при загрузке компонента (они отображаются на странице, а также наконсоль), проблема в том, что эти значения недоступны при обработке валидатора.Вызывается createValidator, но значения приходят как неопределенные.Я могу внедрить службу в валидатор и снова извлечь значения из остального serive, но это не имеет никакого смысла.Любая идея, как сделать this.tripNames доступным в Validator?Спасибо.

Answer 1

Вам необходимо использовать asyncValidator при проверке в зависимости от http-запроса или другого наблюдаемого.

ngAfterViewInit() {
  this.tripForm = new FormGroup ({
    newTripName: new FormControl('', {
      validators:  Validators.compose([
        Validators.required,
        Validators.minLength(3)
      ]),
      asyncValidators: [tripNamesValidator.bind(this)],
      updateOn: 'blur'
    })
  });
}

tripNamesValidator() {
  return this.tripService.getTripNames()
    .map(tripNames=>{
      return youCondition?null:{errorName: 'error message'};
   }); 
}