如何有条件地关闭引导模式错误:$(..).Modal

Question

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

我在angular 6中工作，似乎很多人都有这个问题，所以我尝试了其他堆栈交换问题中的一些东西，但没有成功。

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

我尝试在表单无效时禁用该按钮，并在其上放置一个div，这样当单击div时会显示错误，当单击该按钮时表单会提交。这就造成了访问div后面的按钮的问题。

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

我理想的解决方案是使用按钮函数和一个简单的if-else语句来给出错误消息，或者提交表单并关闭模态。

脚本导入：

<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>

Modal 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的重叠。尝试从angular cli.json文件中的脚本数组中删除jquery。