Bootstrap vue b-modal 提交数据时不高亮字段

Question

我正在使用 bootstrap vue 来设计我的应用程序。在应用程序中，我使用 b-modal。 b-modal 中的一些字段是必需的，所以如果用户没有向他们提供信息，我想突出显示它们。在我在其他应用程序中使用的正常 bootstrap 中，它突出显示该字段并显示默认消息 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。

如果表单提交成功，我们需要手动隐藏模态框。在代码片段中，我们为此使用 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>

Bootstrap vue b-modal 提交数据时不高亮字段

Bootstrap vue b-modal does not highlight the field on submission of the data

javascript

twitter-bootstrap

vue.js

bootstrap-modal

bootstrap-vue