Question

我使用最后一个Angular版本和ng-bootstrap在我的主要组件中创建了一些弹出窗口：

            <ng-template #content let-c="close" let-d="dismiss"> 
                <div class="modal-body">
                    <app-access-form></app-access-form>
                </div>
                <div class="modal-footer">
                    <button type="button" class="btn btn-outline-dark" (click)="c('Close click')">Close popup</button>
                </div>
            </ng-template>

接下来，我创建了一个access-form模块，如：

<form (ngSubmit)="onSubmit()" #accessForm="ngForm">
<div class="form-group">
    <label for="status">Статус</label>
    <input type="number" class="form-control" id="status" name="status" required [(ngModel)]="model.status">
</div>

<button type="submit" class="btn btn-success">Save</button>

如果表单是submutted，我尝试：

onSubmit(): void {
    this.submitted = true;
    this.accessService.addAccess(this.model).subscribe( () );
}

accessService.addAccess发送给API。

如何在提交表单后关闭弹出窗口？我可以在不同的模块中这样做吗？

Answer 1

在component.html：

中

<button type="button" class="btn btn-outline-dark" (click)="onClick()">Close popup</button>

在component.ts：

中

@ViewChild('div') public popover: NgbPopover;

onClick() {
    this.popover.close();
}

请检查this！

如何在提交表单到popap后关闭ng-template弹出窗口？

1 个答案: