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';
  }
}

<强>的AppModule：

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

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

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

Answer 2

在我的场景中，我想将模板包含在父组件中，并将子组件仅作为表单。在这种情况下，它要求在子组件中声明该模块，因此它不起作用。我所做的是使用来自孩子的事件来更新具有关闭状态的父对象。

父母：

    <ng-template #content let-modal>
  <div class="modal-body">
    <app-add-edit-emp [emp]="emp" (successEvent)='AddEditUpdateStatus($event)'  *ngIf="ActivateAddEditEmpComp"></app-add-edit-emp>
  </div>
</ng-template>

孩子：声明您的输出参数：

@Output() successEvent = new EventEmitter();

发送事件：

this.successEvent.emit(true);

在父级中处理：

AddEditUpdateStatus(success){
    if(success){
      this.modalService.dismissAll("success");
    }
  }

Answer 3

如果像下面的代码那样将标签作为rootNode放置，则会丢失正文滚动

<form [formGroup]="stockWatchListFrom" (ngSubmit)="onSubmit()">
  <div class="modal-header">
    <p class="modal-title">Title</p>
  </div>
  <div class="modal-body">
    <div class="form-row">
      <div class="form-group col">
        <label>WatchListName</label>
      </div>
    </div>
  </div>
  <div class="modal-footer">
    <button type="submit" class="btn btn-primary" (click)="onSubmit()">Confirm</button>
    <button type="button" class="btn btn-secondary btn-sm ml-3">Cancel</button>
  </div>
</form>

我更喜欢这个例子

  <div class="modal-header">
    <p class="modal-title">Title</p>
  </div>
  <div class="modal-body">
    <form [formGroup]="stockWatchListFrom" (ngSubmit)="onSubmit()">
      <div class="form-row">
        <div class="form-group col">
          <label>WatchListName</label>
        </div>
      </div>
    </form>
  </div>
  <div class="modal-footer">
    <button type="submit" class="btn btn-primary" (click)="onSubmit()">Confirm</button>
    <button type="button" class="btn btn-secondary btn-sm ml-3">Cancel</button>
  </div>

使用ng-bootstrap

3 个答案: