Bootstrap 4 按钮上的已禁用按钮属性不允许触发模式？

现在想象一下，我有一些字段，其中它将接受HTML表单中的一些用户输入，它有一个按钮ORDER SAMPLE，具有原始和无效的属性。但问题是，当用户在填写完所有必填字段后单击“订单样本”时，模式必须出现（用于向用户确认已下订单），但当我单击“订单样本”按钮时，模式没有任何作用。请告诉我解决这个问题的正确方法。请帮忙

提前谢谢

      <div class="text-center">
      <button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#exampleModalCenter" [disabled]="ordrsampleFormGroup.pristine || ordrsampleFormGroup.invalid">
        Order Sample
      </button>
    </div>
      <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalCenterTitle" 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="exampleModalCenterTitle">Modal title</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>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>

订购样品
情态标题
&时代；
...
接近
保存更改

我想这就是你要找的

<form>
  <input required>
  <input required>
  <input required>


  <div class="text-center">
      <button type="button" class="btn btn-primary btn-lg order_sampleBtn" [disabled]="ordrsampleFormGroup.pristine || ordrsampleFormGroup.invalid">
        Order Sample
      </button>
    </div>
      <div class="modal fade" id="exampleModalCenter" tabindex="-1" role="dialog"
        aria-labelledby="exampleModalCenterTitle" 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="exampleModalCenterTitle">Modal title</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>
            <div class="modal-footer">
              <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
              <button type="button" class="btn btn-primary">Save changes</button>
            </div>
          </div>
        </div>
      </div>

</form>

<script>
//hides modal on load if clicked
$(document).ready(function(){
  $(".order_sampleBtn").click(function(){
    $("#exampleModalCenter").modal({show: false});
  })
 });

$('.order_sampleBtn').on("click", function(){
  let valid = true;
  $('[required]').each(function() {
    if ($(this).is(':invalid') || !$(this).val()) valid = false;
  })
  if (!valid) alert("error please fill all fields!");
  else $("#exampleModalCenter").modal({show: true});
})
</script>

订购样品
情态标题
&时代；
...
接近
保存更改
//如果单击，则在加载时隐藏模态
$（文档）.ready（函数（）{
$（“.order_sampleBtn”）。单击（函数（）{
$（“#exampleModalCenter”）.modal（{show:false}）；
})
});
$（'.order_sampleBtn'）。打开（“单击”，函数（）{
让valid=true；
$（“[必需]”）。每个（函数（）{
if（$（this）.is（':invalid'）| |！$（this.val（））valid=false；
})
如果（！valid）警报（“错误，请填写所有字段！”）；
else$（“#exampleModalCenter”）.modal（{show:true}）；
})