Question

我有一个表单进入引导模式，我想在用户单击“提交”按钮时关闭该模式。看起来像这样：

export class AddPartModalComponent implements OnInit {

  @Input() id:number;
  closeResult: string;
  constructor(private modalService: NgbModal, private graphService:GraphService) { }

  ngOnInit() {
  }
  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}`;
      }
    }

  onSubmit(form: NgForm) {
    //some code
  }

}

<ng-template #content let-modal>
  <div class="modal-header">
    <h4 class="modal-title" id="modal-basic-title">New element</h4>
    <button type="button" class="close" aria-label="Close" (click)="modal.dismiss('')">
      <span aria-hidden="true">&times;</span>
    </button>
  </div>
  <div class="modal-body">
    <form (ngSubmit)="onSubmit(f);" #f="ngForm"><!--here if I add 'modal.dismiss('Cross click')', it dosen't submit or it dosen't close the modal (depend if I add it before or after the 'onSubmit()')-->
      <!--some form content-->
      <button class="btn btn-primary" type="submit" [disabled]="f.invalid">Create</button>
    </form>
  </div>
</ng-template>

<button (click)="open(content)" style="background-color: transparent; height: 100%; width:100%; border: none;"><h4 style="height: 100%; width: 100%;">+ add part +</h4></button>

所以我不知道如何关闭模态，在onSubmit函数中有没有办法关闭它？

我尝试在modal.dimiss函数中使用onSubmit，但是它不起作用，我可能不了解引导模式的工作原理，如果您有任何建议，我会很高兴阅读它。

Answer 1

看看是否可行...将#content而不是ngForm传递给onSubmit。在您的fn内呼叫消除内容。

<form (ngSubmit)="onSubmit(content);" #f="ngForm">

在您的HTML模板中，您已通过模板引用命名了模式“内容”。它将被传递给您的函数...

onSubmit(modal: NgbModal) { 
  modal.dismiss(); // <-- modal will be referring to the above template reference. It's type is NgbModal, which has all the properties, including 'dismiss' and 'open'. 
}

如果您需要对表单进行验证，那么我将传入ngForm，在这种情况下为“ f”。我只发现检查表单是否已提交很有用。除此之外，我使用在组件中定义的表单组。

Answer 2

使用dismiss函数或dismissAll函数关闭模式。

isPerson: true;

提交表单后，如何关闭包含表单的Bootstrap模式？

2 个答案: