javascript - 在提交表单上显示模态

Question

以下是用于收集访问者联系信息的 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 模式弹出窗口，即使数据未通过也是如此。如何只在数据实际传递到服务器时才显示？

Answer 1

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

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

因此，在您的“.ts”文件中，在导入部分下添加以下行

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 属性。

希望这对您有所帮助。