angular - 在 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">×</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>
解决方案
推荐阅读
- javascript - 如何在 React with Jest(无酶)中测试功能组件的状态
- mysql - Springboot + JPA:捕获 DataIntegrityViolationException 与检查 COUNT(field)
- android - Android 中的 Mapbox 热图取决于功能属性
- ios - 在应用程序中注入依赖项后,如何防止 ViewController 被释放:DidFinishLaunchingWithOptions:
- python - 在字符串上使用 exec 在函数中定义函数
- openssl - openssl s_client -showcerts -servername xyz -connect xyz:443 挂了很久
- excel - 如何将一张纸中的特定范围值粘贴/均衡到另一张纸中?
- java - 如何为 Postgresql ->> 运算符创建谓词
- html - 使用要转换的html字符串时,JSPDF pdf内容为空
- php - 一种输入类型中的两个值=文本