Estoy creando un formulario que se puede validar usando la validación de formulario de la interfaz de usuario del elemento en el entorno API de composición de vue 2.
Un formulario anida la mesa dentro, por lo que su estructura es bastante complicada.
... <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) { ...AlgoTab.vue
Cuando valido un formulario sin el campo requerido (ej. smName = ''), el valor 'válido' del validador devuelve verdadero.
Al verificar con las extensiones de Chrome DevTools Vue, descubrí que todos los accesorios de el-form-item están normalmente registrados y v-model está conectado a un campo adecuado.
¿Cómo puedo solucionar este problema de validación?
Descubrí que se produce al cambiar el elemento de la tabla de div simple a elemento de formulario y viceversa.
... <div v-else-if="scope.row[option.prop].type === 'radios'"> <el-radio-group v-model="formData[scope.row[option.prop].prop]"> <el-radio v-for="radioOption in scope.row[option.prop].options" :key="radioOption.value" :label="radioOption.value" > {{ radioOption.label }} </el-radio> </el-radio-group> </div> <div v-else> {{ scope.row[option.prop] }} </div> </div> </el-form-item>El formulario muestra 'divs' en modo show y otros elementos del formulario como radios en modo edición. Supongo que la validación del formulario no funcionó normalmente al cambiar al elemento de formulario.
Así que agrego la clave al formulario y la cambio cuando alterno el modo mostrar-editar y funciona.
... <el-form ... :key="formReRenderKey" :model="formData" :rules="formRules"> ... const onClickBtn = () => { ... isOnModification.value = true formReRenderKey.value++ ...