带有ngrx的异步验证反应形式角度答案

【问题标题】：async validation reactive forms angular with ngrx带有ngrx的异步验证反应形式角度
【发布时间】：2019-06-05 13:32:15
【问题描述】：

我需要验证用户是否存在于我的应用程序的状态中。在我的应用程序中，我使用 ngrx 并通过选择器验证用户是否存在。

我该怎么做？

我无法通过这种方式进行验证，我做错了什么？

return this._formBuilder.group({
  id: ['', this._existUser()],
  dateStart: ['', Validators.required],
  dateEnd: ['', Validators.required]
})

  private _existUser(): AsyncValidatorFn {
    return (control: AbstractControl): Promise<{ [key: string]: any } | null> | Observable<{ [key: string]: any } | null> => {
      const userId = control.value;
      return this._store.select(usersSelectors.getUserById, { id: userId}).pipe(
        debounceTime(500),
        take(1),
        map(value => {
          // Not entering the map...
          return !!value ? { invalid: true } : null;
        })
      )
    };
  }

selectors.ts：

export const getUserById = createSelector(
    selectEntities,
    (entities, props): any => {
        return entities[props.id];
    }
);

【问题讨论】：

验证器被调用了吗？你的选择器工作了吗？
是的，它正在被调用，并且当我订阅时选择器工作。
我认为这是因为 this._existUser() 是一个异步验证器，应该作为第三个参数传递
这就是问题所在，你能把解决方案贴在这里让我解决吗？谢谢！

标签： angular ngrx angular-reactive-forms

【解决方案1】：

问题是您将 this._existUser() 定义为用于验证器或选项的第二个参数，异步验证器必须作为第三个参数传递

return this._formBuilder.group({
  id: ['', [], this._existUser()],
  dateStart: ['', Validators.required],
  dateEnd: ['', Validators.required]
})

https://angular.io/api/forms/FormControl

【讨论】：