I am currently developing a form that utilizes element UI's form validation within the vue 2 composition API environment.
This form includes a table nested inside, making its structure somewhat complex.
...
<div>
<el-form
ref="smKeyInfoForm"
:model="formData"
:rules="formRules">
<el-table
:data="tableData"
...
>
<el-table-column
v-for="option in tableOptions"
:key="option.prop"
:prop="option.prop"
...
>
<template slot-scope="scope">
<el-form-item :prop="scope.row[option.prop].prop">
<el-input
v-model="formData[scope.row[option.prop].prop]"
/>
...
<script lang="ts">
...
const formRules: { [key: string]: FormRule[]} = {
smName: [{ required: true, trigger: 'blur' }],
clientId: [{ required: true, trigger: 'blur' }],
...
}
...
const formData = {
smName: '',
clientId: '',
...
}).then(() => {
(smKeyInfoForm.value as unknown as ElForm).validate(async (valid) => {
if (valid) {
...
SomethingTab.vue
Upon testing, I discovered an issue where the form validation returns 'valid' even when a required field (such as smName) is empty.
After inspecting with Chrome DevTools Vue extensions, it appears that all el-form-item props are properly registered and v-model is correctly linked to the respective field. How can this validation problem be resolved?