Loading Data For Editing In Ng-Bootstrap Modal in Angular

天涯浪子 提交于 2019-12-24 16:10:40

问题


How can i load the data using the ng-bootstrap modal. I'm using this for editing some data in my app? I've used routing and transferring to a different page when editing instead of editing it in modal before. But right now, i want to implement the loading and editing of data in ng-bootstrap modal? How can i do this?

HTML

button type="button"(click)="open(content)">Edit</button>

    <ng-template #content let-c="close" let-d="dismiss">
      <div class="modal-header">
        <h4 class="modal-title">Edit Name</h4>
        <button type="button" class="close" aria-label="Close" (click)="d('Cross click')">
          <span aria-hidden="true">&times;</span>
        </button>
      </div>
      <div class="modal-body">
        <form class="form-horizontal" (ngSubmit)="onEditName(f)" #f="ngForm">
          <div class="form-inline">       
            <label class="col-md-4">Unit</label>
            <input class="col-md-8" type="text" class="form-control" id="name" name="name" ngModel required>
          </div>
          <br>
          <div class="modal-footer">
            <button type="submit" class="btn btn-primary" [disabled]="!f.valid">Save Changes</button>
            <button type="button" data-dismiss="modal" class="btn btn-secondary" (click)="c('Close click')">Close</button>
          </div>
        </form>
      </div>
    </ng-template>

TS

 open(content) {
    this.modalRef = this.modalService.open(content);
    this.modalRef.result.then((result) => {
      this.closeResult = `Closed with: ${result}`;
    }, (reason) => {
        this.closeResult = `Dismissed ${this.getDismissReason(reason)}`;
    });
  }

  private getDismissReason(reason: any): string {
    if (reason === ModalDismissReasons.ESC) {
      return 'by pressing ESC';
    } else if (reason === ModalDismissReasons.BACKDROP_CLICK) {
      return 'by clicking on a backdrop';
    } else {
      return  `with: ${reason}`;
    }
  }

来源:https://stackoverflow.com/questions/47341403/loading-data-for-editing-in-ng-bootstrap-modal-in-angular

易学教程内所有资源均来自网络或用户发布的内容,如有违反法律规定的内容欢迎反馈
该文章没有解决你所遇到的问题?点击提问,说说你的问题,让更多的人一起探讨吧!