小编Wil*_*ins的帖子

NgRx - 从后端获取错误验证并传递给组件

我试图从 api 获取错误消息并显示在我的表单输入中,以便用户可以看到正在提交的数据有什么问题。

来自 API 的响应:

{
  "message": "The given data was invalid.",
  "errors": {
    "name": [
      "This name is already in use."
    ]
  }
}
Run Code Online (Sandbox Code Playgroud)

用户form.component.ts

this.store.dispatch(new actions.CreateUser(user));
Run Code Online (Sandbox Code Playgroud)

用户效果.ts

@Effect()
  CreateUser$: Observable<Action> = this.actions$.pipe(
    ofType(UserActions.CREATE_USER),
    map((action: UserActions.CreateUser) => action.payload),
    switchMap(payload => {
      return this.userService.save(payload).pipe(
        map((user: User) => {
          return new UserActions.CreateUserSuccess(user);
        }),
        catchError(err => {
          return of(new UserActions.CreateUserFail());
        })
      );
    })
  );

Run Code Online (Sandbox Code Playgroud)

如何获取该错误并将其传递回我的组件?

我应该在效果内部做喜欢并将其订阅到等待 CreateUserFail 错误的操作吗?我不确定这是否是一个好习惯,因为它会听取所有类型的操作。

ngrx ngrx-effects angular ngrx-store

2
推荐指数
1
解决办法
780
查看次数

标签 统计

angular ×1

ngrx ×1

ngrx-effects ×1

ngrx-store ×1