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，但这些值未定义。我可以向验证器注入服务，然后从宁静的服务中再次获取值，但这没有任何意义。知道如何在验证器中使用this.tripNames吗？谢谢。

Answer 1

根据http请求或其他可观察的结果进行验证时，您需要使用asyncValidator。

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'};
   }); 
}

如何将值传递给验证器以将服务调用保存在角度5中？

1 个答案: