Checking conditions sequentially in Angular

Question

Checking conditions sequentially in Angular

I have a unique use case that requires me to verify certain conditions. If one condition fails, I should not proceed to the next one. Instead, based on the failed condition, I need to display a dialog with a title and description explaining what went wrong. Assume I have a service (pseudo code) // verify-condition.service.ts

public validateConditions():Observable<ValidationData> {
  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;
      })
    );
  }
}

and in the component where it is being used

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

The challenge here is that in the service, all conditions are checked at once using combineLatest. However, I want to check them one by one. If the first condition fails, I should not proceed to the next one but instead throw an error or indicate that it fails and provide the data necessary to display the dialog.

  public validateConditionsInOrder():Observable<ValidationData|boolean> {
    return this.getContractSignStatus().pipe(
        map((signStatus:ContractStatus)=>{
            if(signStatus !== ContractStatus.SIGNED){
                return {
                    hasContract:signStatus
                }
            } else {
                return true;
            }
        }),
        switchMap((previousCondition)=>{ 
            if(!previousCondition){ // if previous condition failed, stop verification and return data from the failed condition

            } else {
                this.hasTUTSigned(); // if previous condition passes, move on to the next one. Need to know what went wrong for displaying dialog.
            }
        })
    )
  }

javascript angular typescript rxjs observable

Answer 1

Answer №1

To create a sequence of observables/calls, consider utilizing the iif operator. While it may not be the most elegant solution, it can serve as a starting point for developing a custom pipe, as suggested by @Will Alexander.

public validateConditions(): Observable<ValidationModal> {
  // Prepared validateConditions object to provide a basis for partial Observables
  const result = {
    hasContract: false,
    hasTUTSigned: false,
    wasSigned: false,
    valid: null,
    signDate: null,
  };

  // Directly map the hasContract state and store for later use
  const hasContract$: Observable<ContractStatus> =
    this.getContractSignStatus().pipe(
      map((hasContract) => ({
        ...result,
        hasContract: hasContract === ContractStatus.SIGNED,
      }))
    );

  const hasTUTSigned$: Observable<boolean> = this.hasTUTSigned();
  const doData$: Observable<DoModel> = this.getDoData();

  // Begin by piping hasContract$ instead of using combineLatest
  return hasContract$.pipe(
    switchMap((validateConditions) =>
      iif(
        // Chain hasTUTSigned$ if hasContract is true, or return previous state
        () => validateConditions.hasContract,
        hasTUTSigned$.pipe(
          map((hasTUTSigned) => ({ ...validateConditions, hasTUTSigned }))
        ),
        of(validateConditions) // Return unchanged data
      )
    ),
    switchMap((validateConditions) =>
      iif(
        // Map different data based on condition (hasTUTSigned)
        () => validateConditions.hasTUTSigned,
        doData$.pipe(map((data) => ({ ...validateConditions, ...data }))),
        of(validateConditions) // Return unchanged data
      )
    )
  );
}

By leveraging iif and of, you can either chain real observables or maintain the original validateConditions object if conditions are not met.

Answer 2

To create a sequence of observables/calls, consider utilizing the iif operator. While it may not be the most elegant solution, it can serve as a starting point for developing a custom pipe, as suggested by @Will Alexander.

public validateConditions(): Observable<ValidationModal> {
  // Prepared validateConditions object to provide a basis for partial Observables
  const result = {
    hasContract: false,
    hasTUTSigned: false,
    wasSigned: false,
    valid: null,
    signDate: null,
  };

  // Directly map the hasContract state and store for later use
  const hasContract$: Observable<ContractStatus> =
    this.getContractSignStatus().pipe(
      map((hasContract) => ({
        ...result,
        hasContract: hasContract === ContractStatus.SIGNED,
      }))
    );

  const hasTUTSigned$: Observable<boolean> = this.hasTUTSigned();
  const doData$: Observable<DoModel> = this.getDoData();

  // Begin by piping hasContract$ instead of using combineLatest
  return hasContract$.pipe(
    switchMap((validateConditions) =>
      iif(
        // Chain hasTUTSigned$ if hasContract is true, or return previous state
        () => validateConditions.hasContract,
        hasTUTSigned$.pipe(
          map((hasTUTSigned) => ({ ...validateConditions, hasTUTSigned }))
        ),
        of(validateConditions) // Return unchanged data
      )
    ),
    switchMap((validateConditions) =>
      iif(
        // Map different data based on condition (hasTUTSigned)
        () => validateConditions.hasTUTSigned,
        doData$.pipe(map((data) => ({ ...validateConditions, ...data }))),
        of(validateConditions) // Return unchanged data
      )
    )
  );
}

By leveraging iif and of, you can either chain real observables or maintain the original validateConditions object if conditions are not met.

Answer 3

Answer №2

Below is a practical example:

const checkValidity = (validity: boolean) => of(validity).pipe(delay(1000));

const validityCheck1$ = checkValidity(true);
const validityCheck2$ = checkValidity(true);
const validityCheck3$ = checkValidity(true);

const throwErrorOnFalse =
  (error: string) =>
  <T>(obs$: Observable<T>): Observable<T> =>
    obs$.pipe(
      tap((x) => {
        if (!x) {
          throw new Error(error);
        }
      })
    );

concat(
  validityCheck1$.pipe(throwErrorOnFalse(`Condition 1 was violated`)),
  validityCheck2$.pipe(throwErrorOnFalse(`Condition 2 was violated`)),
  validityCheck3$.pipe(throwErrorOnFalse(`Condition 3 was violated`))
)
  .pipe(
    tap(() => console.log(`[DEBUG] A condition has passed`)),
    ignoreElements(),
    tap({ complete: () => console.log(`All conditions met`) })
  )
  .subscribe();

Also, explore this live demonstration on Stackblitz, where you can switch the conditions to false to observe different outcomes.

The conditions are executed in sequence. If one fails, it will terminate the process and display the specified error message. This makes it easy to handle errors downstream, such as displaying them in a modal.

Experiment with toggling the conditions - when all are true, you'll see "All conditions met" after 3 seconds. However, setting one to false will trigger an error and halt the process.

Answer 4

Below is a practical example:

const checkValidity = (validity: boolean) => of(validity).pipe(delay(1000));

const validityCheck1$ = checkValidity(true);
const validityCheck2$ = checkValidity(true);
const validityCheck3$ = checkValidity(true);

const throwErrorOnFalse =
  (error: string) =>
  <T>(obs$: Observable<T>): Observable<T> =>
    obs$.pipe(
      tap((x) => {
        if (!x) {
          throw new Error(error);
        }
      })
    );

concat(
  validityCheck1$.pipe(throwErrorOnFalse(`Condition 1 was violated`)),
  validityCheck2$.pipe(throwErrorOnFalse(`Condition 2 was violated`)),
  validityCheck3$.pipe(throwErrorOnFalse(`Condition 3 was violated`))
)
  .pipe(
    tap(() => console.log(`[DEBUG] A condition has passed`)),
    ignoreElements(),
    tap({ complete: () => console.log(`All conditions met`) })
  )
  .subscribe();

Also, explore this live demonstration on Stackblitz, where you can switch the conditions to false to observe different outcomes.

The conditions are executed in sequence. If one fails, it will terminate the process and display the specified error message. This makes it easy to handle errors downstream, such as displaying them in a modal.

Experiment with toggling the conditions - when all are true, you'll see "All conditions met" after 3 seconds. However, setting one to false will trigger an error and halt the process.

Answer 5

Answer №3

function checkConditionsValidity () {
    const hasContract$: Observable<ContractStatus> = fetchContractSignStatus();
    const hasTUTSigned$: Observable<boolean> = checkTUTSigning();
    const doData$: Observable<DoModel> = retrieveDoData();
    return new Observable(subscriber => {
        const conditions = {
            hasContract : null,
            hasTUTSigned: null,
            wasSigned   : null,
            valid       : null,
            signDate    : null,
        }

        concat(
            hasContract$.pipe(tap(hasContract => conditions.hasContract = hasContract === ContractStatus.SIGNED)), 
            hasTUTSigned$.pipe(tap(hasTUTSigned => conditions.hasTUTSigned = hasTUTSigned)),
            doData$.pipe(tap(doData => Object.assign(conditions, {
                wasSigned : doData.wasSigned,
                valid     : doData.valid,
                signDate  : doData.signDate,
            }))), 
        ).subscribe({
            complete    : ()    => subscriber.next(conditions),
            error       : error => {
                console.error(error);       
                subscriber.next(conditions);     
            }
        })
    }).pipe(take(1), map(conditions => ({conditions  : conditions,}) as ValidationModal))
}

The essence of my approach involves using rxjs.concat to organize and control the sequence of multiple observables before creating a new Observable instance to handle the data translation.

Key Points:

Each subsequent observable waits for the previous one to finish before executing
Upon receiving data from an observable, update the corresponding validation property with the tap operator
Once all three observables have completed, return the final validation status
If an error occurs in any observable, the chain halts execution
In case of errors, trigger the error handler and return the partially updated conditions
Structure the finalized conditions into a format suitable for ValidationModal

Note: My method expects observables to be completed and does not function with ongoing streams.

Answer 6

function checkConditionsValidity () {
    const hasContract$: Observable<ContractStatus> = fetchContractSignStatus();
    const hasTUTSigned$: Observable<boolean> = checkTUTSigning();
    const doData$: Observable<DoModel> = retrieveDoData();
    return new Observable(subscriber => {
        const conditions = {
            hasContract : null,
            hasTUTSigned: null,
            wasSigned   : null,
            valid       : null,
            signDate    : null,
        }

        concat(
            hasContract$.pipe(tap(hasContract => conditions.hasContract = hasContract === ContractStatus.SIGNED)), 
            hasTUTSigned$.pipe(tap(hasTUTSigned => conditions.hasTUTSigned = hasTUTSigned)),
            doData$.pipe(tap(doData => Object.assign(conditions, {
                wasSigned : doData.wasSigned,
                valid     : doData.valid,
                signDate  : doData.signDate,
            }))), 
        ).subscribe({
            complete    : ()    => subscriber.next(conditions),
            error       : error => {
                console.error(error);       
                subscriber.next(conditions);     
            }
        })
    }).pipe(take(1), map(conditions => ({conditions  : conditions,}) as ValidationModal))
}

The essence of my approach involves using rxjs.concat to organize and control the sequence of multiple observables before creating a new Observable instance to handle the data translation.

Key Points:

Each subsequent observable waits for the previous one to finish before executing
Upon receiving data from an observable, update the corresponding validation property with the tap operator
Once all three observables have completed, return the final validation status
If an error occurs in any observable, the chain halts execution
In case of errors, trigger the error handler and return the partially updated conditions
Structure the finalized conditions into a format suitable for ValidationModal

Note: My method expects observables to be completed and does not function with ongoing streams.

Checking conditions sequentially in Angular

Answer №1

Answer №2

Answer №3

Similar questions

Skrollr immediate pop-up notification

Leveraging environmental variables in a Vue.js web application

Is it feasible for a React-based shell to host or load an Angular component using Module Federation in Webpack 5?

Using backslashes to escape a JavaScript array elements

The Fixed Navbar is causing sections to be slightly off from their intended positions

Executing React Fetch API Twice upon loading the page

UPDATE: Choosing several classes and then toggling the classes independently for each one

Maintain hover effect of main menu on sub-menu in CSS3 flip dropdown menu

Running tests on functions that are asynchronous is ineffective

Generating new elements on the fly using jQuery and passing a string parameter through the onclick event

Node.js refusing to acknowledge the get request handler for the homepage of the website

When using Material UI TextField with input type "date", the event.target.value does not seem to be accessible

Incorporating responsive design with React and Typescript

Dealing with React and Firebase Authentication Errors: How to Handle Errors for Existing Accounts with Different Credentials

After successfully binding data in Angular, the Select component is failing to display any content

A guide on styling JSON key values within HTML

The $http function in AngularJS consistently returns undefined instead of the expected value

Tips for addressing the error message "Cannot PUT /":

Running a CSS keyframes animation can be achieved by removing the class associated with it

Show the meta-field mp3 and place it in a lightbox container on the portfolio page