Question

我正在尝试让用户在Bootstrap Modal中提交表单。如果填写表单中的每个字段，则模式应消失，信息将发送到后端。如果不是每个字段都填写完整，我希望显示一条错误消息并使模式保持打开状态。

我正在使用角度6，似乎很多人都遇到了这个问题，所以我尝试了其他堆栈交换问题中的某些内容，但没有成功。

我将jQuery导入从import * as $ from 'jquery';更改为declare var $: any;。

我尝试在表单无效时禁用按钮，并在其上放置div，以便在单击div时显示错误，并且在单击按钮时提交表单。这就产生了无法访问div后面的按钮的问题。

根据我在 Github 上阅读的内容，我将popper的版本从1.14更改为1.10。

我的理想解决方案是使按钮功能具有简单的if语句，以给出错误消息，或者提交表单并关闭模式。

脚本导入：

<script src="https://code.jquery.com/jquery-3.3.1.slim.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js"></script>

html样式：

<div class="modal fade" id="domicilioModalCenter" tabindex="-1" role="dialog" aria-labelledby="domicilioModalCenterTitle" aria-hidden="true">
    <div class="modal-dialog modal-dialog-centered" role="document">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="domicilioModalLongTitle">Enviar a domicilio</h5>
                <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
            </div>
            <div class="modal-body">
                <div class="row">                                                                               
                    <form #domicilioForm="ngForm">
                    </form>
                </div><br/>
            </div>
            <div class="modal-footer">
                <button type="button" class="float-left btn-cbgb white" data-dismiss="modal">Cerrar</button>
                <button type="button" class="btn-cbgb blue float-right" (click)="enviarOrden('Enviar a domicilio', domicilioForm)">Enviar</button>
            </div>
        </div>
    </div>
</div>

JS：

enviarOrden(metodo_de_completar, form) {
    if (!form.valid) { 
        this.alerts.error('Por favor complete campos requeridos');
    } else {
        console.log(metodo_de_completar, form.value);
        $('#domicilioModalCenter').modal('hide');
    }
}

我也尝试过：

$(window).on('load', function() {$('#domicilioModalCenter').modal('hide');});

没有成功。

我不断收到错误$(...).modal不是一个函数。真的只是尝试切换 Enviar 按钮的功能。开放给所有想法。谢谢！

Answer 1

这仅仅是因为jquery的重叠。尝试从cli.json文件的脚本数组中删除jquery。

如何有条件地关闭Bootstrap Modal错误：$（...）。modal

1 个答案: