Angular按顺序验证条件，失败终止并返回弹窗数据

业务需求 #

需要依次验证多个条件，若前一个条件验证失败，则立即终止后续验证，并返回包含错误标题和描述的弹窗数据；所有条件验证通过后，执行后续流程。当前实现使用combineLatest同时触发所有验证请求，需修改为按顺序逐个验证的逻辑。

现有代码实现 #

verify-condition.service.ts 原验证方法 #

public validateConditions(): Observable<ValidationModal> {
  const hasContract$: Observable<ContractStatus> = this.getContractSignStatus();
  const hasTUTSigned$: Observable<boolean> = this.hasTUTSigned();
  const doData$: Observable<DoModel> = this.getDoData();
  
  return combineLatest([hasContract$, hasTUTSigned$, doData$]).pipe(
    map(([hasContract, hasTUTSigned, doData]) => {
      const validationConditions: ValidationModal = {
        conditions: {
          hasContract: hasContract === ContractStatus.SIGNED,
          hasTUTSigned,
          wasSigned: doData.wasSigned,
          valid: doData.valid,
          signDate: doData.signDate,
        }
      };
      return validationConditions;
    })
  );
}

组件调用代码 #

public verifyProcess(): void {
  verifyConditionService.validateConditions().pipe(take(1)).subscribe((validationData: ValidationData) => {
    if (validationData) {
      this.modalValidationService.openModal(validationData);
    } else {
      this.beginProcess();
    }
  });
}

顺序验证方法实现方案 #

通过switchMap操作符串联多个Observable，每个步骤仅在前一个验证通过时才执行下一个请求，失败则直接返回错误弹窗数据并终止流程。以下是validateConditionsInOrder的完整实现：

public validateConditionsInOrder(): Observable<ValidationData | boolean> {
  // 第一步：验证合同签署状态
  return this.getContractSignStatus().pipe(
    switchMap((signStatus: ContractStatus) => {
      if (signStatus !== ContractStatus.SIGNED) {
        // 验证失败，返回对应错误弹窗数据
        return of({
          title: "合同未签署",
          description: "请先完成合同签署操作",
          conditions: { hasContract: false }
        } as ValidationData);
      }
      // 验证通过，进入下一步
      return this.hasTUTSigned();
    }),
    switchMap((hasTUTSigned: boolean) => {
      if (!hasTUTSigned) {
        // TUT签署验证失败，返回错误弹窗数据
        return of({
          title: "TUT未签署",
          description: "请完成TUT签署后再继续",
          conditions: { hasTUTSigned: false }
        } as ValidationData);
      }
      // 验证通过，进入下一步
      return this.getDoData();
    }),
    switchMap((doData: DoModel) => {
      // 验证DO数据的多个条件
      if (!doData.wasSigned) {
        return of({
          title: "DO未签署",
          description: "DO文档尚未完成签署",
          conditions: { wasSigned: false }
        } as ValidationData);
      }
      if (!doData.valid) {
        return of({
          title: "DO数据无效",
          description: "当前DO数据不符合要求，请检查",
          conditions: { valid: false }
        } as ValidationData);
      }
      // 所有验证通过，返回true触发后续流程
      return of(true);
    })
  );
}

组件调用逻辑调整 #

组件调用时替换方法名即可，逻辑保持一致：

public verifyProcess(): void {
  verifyConditionService.validateConditionsInOrder().pipe(take(1)).subscribe((result) => {
    if (typeof result !== 'boolean') {
      // 验证失败，弹出错误弹窗
      this.modalValidationService.openModal(result);
    } else {
      // 所有验证通过，执行后续流程
      this.beginProcess();
    }
  });
}

实现说明 #

• 用switchMap串联每个验证步骤，确保前一步验证通过后才触发下一个请求
• 每个验证失败时，通过of()包装错误弹窗数据并返回，直接终止后续流程
• 所有条件验证通过后，返回true告知组件执行后续操作
• 错误数据包含标题、描述和对应失败条件，满足弹窗展示需求

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