angular - 使用 ng-bootstrap 在模态中提交表单

Question

我只是想用 ng-boostrap 在模态中提交一个表单，它比它应该的要复杂得多，我使用 ng-boostrap 来避免 JQuery 代码从来都不是优雅的，但它有成本...我有点沮丧，简单和常见的东西应该更直接。

这是我的模态模板:

<form (ngSubmit)="onSubmit()">
  <ng-template #newCategory let-c="close" let-d="dismiss">
    <div class="modal-header bg-primary text-white text-uppercase">
      <h4 class="modal-title">{{ 'core.create_a_new_category' | translate | uppercase }}</h4>
      <button type="button" class="close text-white" aria-label="Close"  (click)="d()">
        <span aria-hidden="true">&times;</span>
      </button>
    </div>
    <div class="modal-body">
      ...
    </div>
    <div class="modal-footer">
      <button type="submit" class="btn btn-primary" (click)="c('Save click')">
        Add Category
      </button>
    </div>
  </ng-template>
</form>

<!-- Button that trigger modal -->
<div align="center" class="mt-2">
  <span class="mr-1">{{ 'core.want_to_create_custom_category' | translate }}</span>
  <button class="btn btn-lg btn-outline-primary" (click)="open(newCategory)">
    {{ 'core.add_custom_category' | translate }}
  </button>
</div>

我的组件:

export class NewCategoryModalComponent implements OnInit {
  constructor(
    private modalService: NgbModal  ) {
  }

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

使用这种方法，您必须将打开模态的按钮放在不太好的模态组件中。

使用该代码，我可以打开和关闭模态(我花了 2 个小时)，但是现在，我的 onSubmit() 事件不再被拦截，所以操作没有完成。

我错过了什么？

Answer 1

使用组件作为模式内容可能比使用模板更容易。该过程显示在 ng-bootstrap documentation 中。 .下面的代码可以在this stackblitz中测试.

模态内容组件:

下面的 NgbdModalContent 组件包含带有页眉、正文和页脚的表单。这将是模态的内容。单击提交按钮将触发 ngSubmit Angular 事件。

HTML:

<form (ngSubmit)="onSubmit()">
  <div class="modal-header">
    <h4 class="modal-title">Hi there!</h4>
    <button type="button" class="close" aria-label="Close" (click)="activeModal.dismiss('Cross click')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <p>Hello, {{name}}!</p>
  </div>
  <div class="modal-footer">
    <button  class="btn btn-outline-success" (click)="onClick()">Submit</button>
    <button type="button" class="btn btn-outline-dark" (click)="activeModal.close('Close click')">Close</button>
  </div>
</form>

代码:

import { Component, Input } from '@angular/core';
import { NgbModal, NgbActiveModal } from '@ng-bootstrap/ng-bootstrap';

@Component({
  ...
})
export class NgbdModalContent {
  @Input() name;

  constructor(public activeModal: NgbActiveModal) { }

  onClick() {
    console.log("Submit button was clicked!");
  }

  onSubmit() {
    console.log("Form was submitted!");
    this.activeModal.close("Submit");
  }
}

模态组件:

模态组件有一个方法允许以 NgbdModalContent 组件的实例作为其内容打开模态:

@Component({
  ...
})
export class NgbdModalComponent {

  constructor(private modalService: NgbModal) { }

  open() {
    const modalRef = this.modalService.open(NgbdModalContent);
    modalRef.componentInstance.name = 'World';
  }
}

应用模块:

NgbdModalContent 组件必须包含在模块的 entryComponents 中:

import { NgbdModalComponent, NgbdModalContent } from './modal-component';
...

@NgModule({
  ...
  declarations: [NgbdModalComponent, NgbdModalContent, ...],
  entryComponents: [NgbdModalContent]
}) 
export class AppModule {}