Есть небольшой vue проект. Использую bootstrap-vue.
По примеру prevent-closing пытаюсь сделать модальное окно с формой.
В форме несколько полей (должны быть только цифры, должны быть заполнены все).
Код:
<template>
<div class="page">
<div class="b-container">
<b-button v-b-modal.modal-1>Launch demo modal</b-button>
<b-modal
id="modal-1"
hide-footer
title="Please, enter code:"
:body-bg-variant="bodyBgVariant"
>
<form ref="form" @submit.stop.prevent="handleSubmit">
<div class="pin-num text-center">
<ul class="pin-num-list">
<li :key="index" v-for="(item, index) in itemNum">
<b-form-input :id="item.id" :v-model="item.name" :state="item.nameState" required></b-form-input>
</li>
</ul>
</div>
<b-button @click="handleOk" class="mt-4" variant="primary" block>Submit</b-button>
</form>
</b-modal>
</div>
</div>
</template>
<script>
export default {
name: "AppPin",
data() {
return {
pin: "",
bodyBgVariant: "light",
name: "",
nameState: null,
submittedNames: [],
itemNum: [
{ id: "num-1", name: "", nameState: null },
{ id: "num-2", name: "", nameState: null },
{ id: "num-3", name: "", nameState: null },
{ id: "num-3", name: "", nameState: null },
{ id: "num-5", name: "", nameState: null },
{ id: "num-6", name: "", nameState: null }
]
};
},
methods: {
checkFormValidity() {
console.log(this.itemNum.nameState);
const valid = this.$refs.form.checkValidity();
this.itemNum.nameState = valid ? "valid" : "invalid";
return valid;
},
handleOk(bvModalEvt) {
// Prevent modal from closing
bvModalEvt.preventDefault();
// Trigger submit handler
this.handleSubmit();
},
handleSubmit() {
// Exit when the form isn't valid
if (!this.checkFormValidity()) {
return;
}
console.log("AAAAAAAAAAAA");
// Hide the modal manually
this.$nextTick(() => {
this.$refs.modal.hide();
});
}
},
};
</script>
Вопрос: Как по примеру реализовать верификацию формы в модальном окне ? Если все заполнено (цифрами) , то "submit" отправляет результат и закрывает окно, если не верифицировано - не отправляется форма и не закрывается окно.
const valid = this.$refs.form.checkValidity();
Чтобы это заработало, необходимо в инпуты добавить аттрибутpattern
, с соответствующей маскойthis.itemNum.nameState
выдает undefined хотя должно быть или vakid или unvaliditemNum
- у Вас массив. Поэтому все верно пишет. Попробуйте записать так:this.nameState = valid ? "valid" : "invalid";