Angular NgRx状态管理下表单字段校验与页面访问控制实现咨询

你可以按以下步骤修改现有NgRx逻辑，无需新增额外接口请求，所有校验逻辑在状态层即可完成：

1. 放开Model与State的注释字段，补全类型 #

先把之前预留的校验相关字段启用，修正类型定义：

// Model类调整
export interface GMT{
    data: GetGMTData;
    isDataMissing: boolean;
    listOfMissingData: string[]; // 存储缺失的字段名
}

// State初始值调整
export const initialState: GlobalTransferInfoReviewDataState = {
  $api: {} as any,
  error: {},
  data: {},
  isDataMissing: false,
  listOfMissingData: [],
};

2. 在Reducer的成功回调中新增校验逻辑 #

拿到接口返回的用户数据后直接做空值校验，计算缺失字段列表：

on(
  gmtActions.getGmtDataSuccess,
  (state: GlobalTransferInfoReviewDataState, action: ResponseEntity<GetGMTData>) => {
    // 定义所有需要校验的必填字段
    const requiredFields: (keyof GetGMTData)[] = ['firstAndLastName', 'dateOfBirth', 'emailAddress', 'mobilePhone', 'homeAddress'];
    // 筛选出值为空/undefined/空字符串的字段
    const missingFields = requiredFields.filter(field => {
      const fieldValue = action?.data?.[field];
      return !fieldValue || fieldValue.trim() === '';
    });

    return {
      ...state,
      data: action?.data || {},
      isDataMissing: missingFields.length > 0,
      listOfMissingData: missingFields,
      $api: getApiState(state.$api, GET_GMT_DATA, API_STATUS.SUCCESS),
    } as GlobalTransferInfoReviewDataState;
  }
),

3. 新增业务Selector方便上层调用 #

新增两个专用Selector，直接导出业务需要的校验结果和访问权限状态：

// 获取缺失的必填字段列表
export const selectMissingRequiredFields = createSelector(
  selectGmtState,
  (state) => state.listOfMissingData
);

// 获取下一页访问权限：数据请求成功且无缺失字段时返回true
export const selectAllowAccessNextPage = createSelector(
  selectGmtState,
  (state) => {
    const apiStatus = state.$api[GET_GMT_DATA]?.status;
    return apiStatus === API_STATUS.SUCCESS && state.listOfMissingData.length === 0;
  }
);

4. 上层接入使用 #

组件内控制按钮状态 #

// 组件ts
allowNext$ = this.store.select(selectAllowAccessNextPage);
missingFields$ = this.store.select(selectMissingRequiredFields);

ngOnInit() {
  // 页面加载时触发数据拉取
  this.store.dispatch(getGmtData());
}

<!-- 组件模板 -->
<!-- 缺失字段提示 -->
<div *ngIf="(missingFields$ | async)?.length > 0" class="error">
  请补全以下必填字段：{{(missingFields$ | async).join('、')}}
</div>
<!-- 下一页按钮权限控制 -->
<button [disabled]="!(allowNext$ | async)" (click)="navToNext()">下一页</button>

路由守卫拦截（可选） #

如果需要做路由级别的访问控制，可以在守卫中订阅selectAllowAccessNextPage，返回false时拦截跳转到补全信息页面。

内容的提问来源于stack exchange，提问作者Ayoola Etiko