javascript - 提交表单时显示模态框

这是一个用于收集访客联系信息的 Angular 4 组件的代码：

.html:

<form (submit)="onCreateContact()">
    <div class="form-group">
        <input type="text" [(ngModel)]="contactname" name="contactname" class="form-control form-control-lg" placeholder="Name">
    </div>
    <div class="form-group">
        <input type="email" [(ngModel)]="contactemail" name="contactemail" class="form-control form-control-lg" placeholder="Email">
    </div>
    <div class="form-group">
        <input type="text" [(ngModel)]="contactphone" name="contactphone" class="form-control form-control-lg" placeholder="Phone">
    </div>
    <input type="submit" class="btn btn-outline-light btn-block" data-toggle="modal" data-target='#addContactModal'>
</form>

<!-- Modal -->
<div class="modal fade" id="addContactModal" tabindex="-1" role="dialog" aria-labelledby="addContactModalLabel" aria-hidden="true">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="addContactModalLabel">Contact</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close">
                    <span aria-hidden="true">&times;</span>
                </button>
            </div>
            <div class="modal-body">
                Thanks for contacting us! We will get in touch with you shortly.
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-primary" data-dismiss="modal">OK</button>
            </div>
        </div>
    </div>
</div>

.ts:

onCreateContact() {
    let contact = {
        contactname: this.contactname,
        contactemail: this.contactemail,
        contactphone: this.contactphone
    }

    return this.http.post('api/contacts/add', contact).map(res => res.json()).subscribe(data => {
        if(data.success) {
            console.log(data);
        } else {
            console.log('Failed to add contact');
            }
        }
    );
}

所有联系字段都是必填的；如果未填写所有字段，数据不会传送到后端。目前，每次我按下提交按钮时，Bootstrap 模态框都会弹出，即使数据未传送。如何才能只在数据实际传送到服务器时显示它？

答案＃1

当用户点击提交按钮时，您正在切换模态窗口。

你需要做的是，在从后端获取响应后，从组件类(.ts)切换模态框。

所以在你的 ".ts" 文件中，在 imports 部分下面添加以下行

declare var $: any;

然后在从后端收到响应后切换模态框，如下所示

onCreateContact() {
    return this.http.post('api/contacts/add', contact).map(res => res.json()).subscribe(data => {
        if(data.success) {
            console.log(data);
            $('#addContactModal').modal('show'); // Add this line
        } else {
            console.log('Failed to add contact');
            $('#errorModalId').modal('show'); // If you are planning to show error modal when something goes wrong.
        }
    });
}

别忘了从提交按钮中移除 data-toggle 和 data-target 属性。

希望这能帮到你。