Несколько модалов на странице: один и тот же модал, запускаемый разными кнопками - PullRequest
Новая
       18

Несколько модалов на странице: один и тот же модал, запускаемый разными кнопками

0 голосов
/ 07 мая 2019

У меня есть две кнопки на моей странице.У каждой кнопки должен быть свой мод с соответствующими идентификаторами.Однако обе кнопки вызывают одну и ту же модальную форму.

Я назначил идентификаторы им обоим, но кнопки вызывают только модальную форму запроса, а не учетную запись клона.

Вот код: 

<button class="list-group-item collapsed" data-parent="#sidebar" [disabled]="!showAccountsTable" (click)="openCloneAccountModal(content)"><i class="far fa-clone"></i> <span class="hidden-sm-down"> Clone Selected Account</span> </button> 

<button class="list-group-item collapsed" data-parent="#sidebar" [disabled]="!showMakerCheckerTable" (click)="openRequestModule(content)"><i class="fa fa-thumbs-up"></i><i class="fa fa-thumbs-down" ></i><span class="hidden-sm-down"> Accept/Decline Request</span> </button> 


<ng-template #content let-modal>


  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">New Account</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>

    <div class="modal-body">
    ....
    </div>
</ng-template>


<ng-template #content let-modal>
<!-- Update Reuest -->
  <div class="modal-header">
      <h4 class="modal-title" id="modal-request">Update Request</h4>
      <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('Cross click')">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>

    <div class="dropdown">
      Approve 
    <select [(ngModel)]="approve" >
     <option  class="dropdown-item" [value]="true" >true</option>
     <option  class="dropdown-item" [value]="false" >false</option>
    </select>

    </div>

    <div class="modal-body">
      <form (ngSubmit)="onSubmitPending()">

        <div class="modal-footer">
          <button  type="submit" class="btn btn-outline-dark" >Save</button>
        </div>

      </form>
    </div>
  </ng-template>

Вот код: 


  openCloneAccountModal(content) {

    this.newAccount = this.clonedAccount;
    this.newAccount.lastUpdatedDate = new Date();
    this.newAccount.enteredDate = new Date();
    this.newAccount.enteredBy = "Hardcoded User Value (TEMP)";
    this.newAccount.lastUpdatedBy = "Hardcoded User Value (TEMP)";
    this.modalService.open(content).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

  openRequestModule(content){
    console.log(this.pendingSelected);
    console.log("id" + this.pendingSelected.id);
    this.modalService.open(content).result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
      this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }
...