Question

我正在尝试为Slug表单控件创建一个自定义验证器。这是我的代码。

ngOnInit() {
    this.slugCtrl.setAsyncValidators(this.slugValidator);
}

slugValidator(control: AbstractControl) {
    const obs1 = control.valueChanges.pipe(
      debounceTime(300),
      distinctUntilChanged(),
      map(val => {
        this.isError = of(false);
        if (val === ' ') {
          this.isAvailable = of(false);
          // this.slugCtrl.setErrors({ required: true });
          return { required: true };
          // obs.next({ required: true });
          // obs.complete();
        }
        this.isAvailable = of(false);
        if (this.slugCtrl.valid) {
          this.store.dispatch(new SlugActions.checkSlug({ slug: val }));
        }

        console.log(val);
      })
    );

    return obs1;
}

只要验证器运行，它就会说无法读取未定义的isError属性。这意味着“ this”未在地图函数中传递。我在这里做什么错了？

另外，如何返回多个可观察物？因为我的slug验证需要从不同的资源检查很多事情，并且每个资源都返回一个可观察的对象。这是更多代码

   this.store.select(getSlugsIsProcessingFail()).subscribe(data => {
    this.store.select(getSlugsIsProcessingError()).subscribe(_err => {
      if (_err === 'Server error') {
        alert(
          'There was an error processing your request. Please try again!'
        );
        this.isError = of(false);
      } else if (_err.hasOwnProperty('message')) {
        this.error = _err.message;
        // this.slugCtrl.setErrors({ available: true });

        this.isError = of(true);
        return { required: true };

      }
    });
    this.store.select(getSlugsIsProcessingSuccess()).subscribe(data => {
      if (data) {
        this.isAvailable = of(true);
        // this.slugCtrl.setErrors(null);
         return null;

      }
    });
  });

Answer 1

您应该使用箭头功能将此功能与您的功能绑定

slugValidator = (control: AbstractControl) => {
...

}

在地图运算子Angular中未定义“ this”

1 个答案: