首页 > 解决方案 > 在 ngb-modal 内部创建一个正式的表单

问题描述

该表单显示在模态窗口之外的任何位置,但在模态窗口中消失一次。我想我应该打电话给它,但怎么称呼?模态窗口:

open(content) {
this.modalService.open(content, {ariaLabelledBy: 'modal-basic-title'}).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}`;
}

} }

模板;

   <ng-template #content let-modal>
  <div class="modal-header p-4">
    <h4 class="modal-title" id="modal-basic-title">New Member</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">
    <form class="needs-validation" [formGroup]="addMemberForm" novalidate>
      <formly-form [model]="model" [fields]="fields" [options]="options" [form]="addMemberForm"></formly-form>
      <button type="submit" class="btn btn-primary add-button">Send Invite</button>
    </form>
  </div>
</ng-template>

标签: angulartypescriptangular-formly

解决方案


推荐阅读