On the portfolio selection page, I can either enter an account number or input a name.

When I enter an account number 979-9638403-03 and then click on the Search button

A modal is correctly displayed with the client's data

My problem

If the user's account is incorrect, for example 123-4

Another modal displays that the input is incorrect.

For now, everything is fine, but when I close the modal.

The Selection confirmation modal appears, and it bothers me a lot!

In fact, the second modal should not appear if there is an error.

I think the problem seems to be here?

...
const modalRef = this.modalService.show(SelectPortfolioResultModalComponent, {
  ...NOT_CLOSABLE_MODAL_OPTIONS,
  class: "modal-dialog-centered modal-lg",
  ariaLabelledBy: "modal-error-title",
  initialState: {
    isLoading: true,
  },
});
...

Here is the full code

export class SelectPortfolioComponent implements OnDestroy {
  private unsubscribe$ = new Subject<void>();
  search = new SelectPortfolioModel();
  account: number;

  constructor(
    private service: SelectPortfolioService,
    private modalService: BsModalService,
    private router: Router
  ) {}

  ngOnDestroy(): void {
    this.unsubscribe$.next();
    this.unsubscribe$plete();
  }

  submit(): void {
    const modalRef = this.modalService.show(
      SelectPortfolioResultModalComponent,
      {
        ...NOT_CLOSABLE_MODAL_OPTIONS,
        class: "modal-dialog-centered modal-lg",
        ariaLabelledBy: "modal-error-title",
        initialState: {
          isLoading: true,
        },
      }
    );

    modalRef
      .content!.selectedPortfolio.pipe(takeUntil(this.unsubscribe$))
      .subscribe((val: SelectPortfolio | undefined) => {
        if (val) {
          this.service
            .selectPortfolio(val)
            .pipe(takeUntil(this.unsubscribe$))
            .subscribe(() => {
              this.router.navigate(["/portfolio/valorisation"]);
            });
        }
        modalRef?.hide();
      });

    this.service
      .getPortfolios(this.search)
      .pipe(takeUntil(modalRef.content!.selectedPortfolio))
      .subscribe((res) => {
        if (modalRef) {
          modalRef.content!.portfolios = res.PTF;
          const noResults = res.RETURNLIST.find(
            (item) => item.CODE === ApiResponseCodeEnum.Sch00
          );
          if (noResults) {
            modalRef.content!.errorMessage = noResults.TEXTE;
          }
          modalRef.content!.isLoading = false;
        }
      });
  }
}

Thank you for your help and the time you dedicated to my problem.

On the portfolio selection page, I can either enter an account number or input a name.

When I enter an account number 979-9638403-03 and then click on the Search button

A modal is correctly displayed with the client's data

My problem

If the user's account is incorrect, for example 123-4

Another modal displays that the input is incorrect.

For now, everything is fine, but when I close the modal.

The Selection confirmation modal appears, and it bothers me a lot!

In fact, the second modal should not appear if there is an error.

I think the problem seems to be here?

...
const modalRef = this.modalService.show(SelectPortfolioResultModalComponent, {
  ...NOT_CLOSABLE_MODAL_OPTIONS,
  class: "modal-dialog-centered modal-lg",
  ariaLabelledBy: "modal-error-title",
  initialState: {
    isLoading: true,
  },
});
...

Here is the full code

export class SelectPortfolioComponent implements OnDestroy {
  private unsubscribe$ = new Subject<void>();
  search = new SelectPortfolioModel();
  account: number;

  constructor(
    private service: SelectPortfolioService,
    private modalService: BsModalService,
    private router: Router
  ) {}

  ngOnDestroy(): void {
    this.unsubscribe$.next();
    this.unsubscribe$plete();
  }

  submit(): void {
    const modalRef = this.modalService.show(
      SelectPortfolioResultModalComponent,
      {
        ...NOT_CLOSABLE_MODAL_OPTIONS,
        class: "modal-dialog-centered modal-lg",
        ariaLabelledBy: "modal-error-title",
        initialState: {
          isLoading: true,
        },
      }
    );

    modalRef
      .content!.selectedPortfolio.pipe(takeUntil(this.unsubscribe$))
      .subscribe((val: SelectPortfolio | undefined) => {
        if (val) {
          this.service
            .selectPortfolio(val)
            .pipe(takeUntil(this.unsubscribe$))
            .subscribe(() => {
              this.router.navigate(["/portfolio/valorisation"]);
            });
        }
        modalRef?.hide();
      });

    this.service
      .getPortfolios(this.search)
      .pipe(takeUntil(modalRef.content!.selectedPortfolio))
      .subscribe((res) => {
        if (modalRef) {
          modalRef.content!.portfolios = res.PTF;
          const noResults = res.RETURNLIST.find(
            (item) => item.CODE === ApiResponseCodeEnum.Sch00
          );
          if (noResults) {
            modalRef.content!.errorMessage = noResults.TEXTE;
          }
          modalRef.content!.isLoading = false;
        }
      });
  }
}

Thank you for your help and the time you dedicated to my problem.

• angular
• typescript

Share Follow asked Mar 10 at 8:59 MarinaLaGrandeMarinaLaGrande 30322 gold badges33 silver badges77 bronze badges

Add a comment  | 

1 Answer 1

Sorted by: Reset to default 0

I think the previous subscriptions are still existing, which might be causing the double popup issue, it could be due to the usage of HTML with same id, name or something else. Or due to the observables being still active even when the modal gets destroyed.

Try take(1) instead of takeUntil which completes on first emission.

  submit(): void {
    ...
    modalRef
      .content!.selectedPortfolio.pipe(take(1))