在提交表单上显示模式答案

【问题标题】：Show modal on submit form在提交表单上显示模式
【发布时间】：2018-03-25 01:03:04
【问题描述】：

以下是用于收集访问者联系信息的 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 模式都会弹出，即使数据没有传递也是如此。只有当数据实际传递到服务器时，如何才能显示它？

【问题讨论】：

标签： javascript html twitter-bootstrap angular typescript

【解决方案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 属性。

希望这会有所帮助。

【讨论】：