Bootstrap vue b-modal 在提交数据时不突出显示字段

Question

我正在使用bootstrap vue 来设计我的应用程序。在应用程序中，我使用的是b-modal。 b-modal 中的某些字段是必需的，因此如果用户没有向他们提供信息，我想突出显示它们。在我在其他应用程序中使用的正常引导程序中，它突出显示该字段并显示默认消息 field is required 但在 bootstrap-vue 默认情况下我没有收到任何此类消息。有人可以告诉我需要做什么吗？

以下是我拥有的bootstrap vue modal 代码：

<template>
  <b-modal
    id="formSubmission"
    size="lg"
    title="Basic Details"
    :visible="visibility"
    style="width: 100%"
    @cancel="hideModal"
    @ok="submitModal($event)"
  >
    <b-form-select v-model="type" class="form-control" required>
      <b-form-select-option value="type1">
        Type1
      </b-form-select-option>
      <b-form-select-option value="type2">
        Type2
      </b-form-select-option>
    </b-form-select>

    <div v-if="type == 'type1'">
      <input
        type="text"
        class="form-control"
        style="width:200px"
        autocomplete="off"
        placeholder="Enter Name"
        :required="type == 'type1'"
      >
    </div>
  </b-modal>
</template>

<script>
export default {
  data () {
    return {
      visibility: true
    }
  },
  methods: {
    hideModal () {
      this.visibility = false
    },

    submitModal (event) {
      event.preventDefault()
    }
  }
}
</script>

<style>
</style>

我想要做的是突出显示提交期间所需的字段？我想知道是否有一种开箱即用的方法来做到这一点，而不是为每个字段编写函数。

类似这样的：

Answer 1

模态不知道您在其中有输入元素，并且您想要验证它。这就是为什么什么都没发生的原因。

您可以通过几种方式解决此问题。我推荐的方法是首先使用<b-form> 在您的输入字段周围创建一个表单。 然后当点击OK 按钮时，我们需要提交表单，因为这将验证输入并在满足要求时显示错误。

然后我们将使用modal-footer 插槽覆盖默认页脚并用我们自己的按钮替换它。对于取消按钮，我们将使用插槽范围内的 cancel 方法，以便它作为默认值运行。

但是，对于OK 按钮，我们将使用form 属性和type="submit"，为模态框内的表单创建一个提交按钮。 form 属性从我们的表单中获取 id。

如果表单提交成功，我们需要手动隐藏模式。在 sn-p 中，我们为此使用 this.$bvModal.hide。

new Vue({
  el: '#app',
  data() {
    return {
      value: ''
    }
  },
  methods: {
    onSubmit() {
      const {
        value
      } = this;
      alert(`Submitted: ${value}`);

      this.$bvModal.hide('my-modal')
    }
  }
})

<link type="text/css" rel="stylesheet" href="//unpkg.com/bootstrap@4.5.3/dist/css/bootstrap.min.css" />
<link href="https://unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.css" rel="stylesheet" />

<script src="//unpkg.com/vue@2.6.12/dist/vue.min.js"></script>
<script src="//unpkg.com/bootstrap-vue@2.21.2/dist/bootstrap-vue.min.js"></script>


<div id="app" class="p-4">
  <b-btn v-b-modal.my-modal>Show Modal</b-btn>
  <b-modal id="my-modal" title="Form Modal" visible>
    <b-form id="my-form" @submit.prevent="onSubmit">
      <b-input v-model="value" required minlength="3" autofocus placeholder="Write something.."></b-input>
    </b-form>

    <template #modal-footer="{ cancel }">
      <b-btn @click="cancel">Cancel</b-btn>
      <b-btn variant="primary" type="submit" form="my-form">OK</b-btn>
    </template>
  </b-modal>
</div>