Tengo un problema y no puedo encontrar la solución 🤔 Me gustaría escuchar sus ideas sobre este problema.
Creé componentes reutilizables de Form y InputField. El componente InputField obtiene un accesorio de validación, una función que devuelve un mensaje verdadero o de error, ya sea que la entrada sea válida o no.
// InputField.vue const validate = () => { isValid.value = props.validation(inputValue.value); }; // App.vue <InputField v-model="formData.firstName" element="input" required name="First Name" :validation="(val) => /^.{2,}$/.test(val) || 'Minimum 2 characters'" />Ahora, en Form.vue, tengo una variable llamada isValid, y si es falsa, la función de envío no debería funcionar.
Entonces, el problema es: ¿Cómo verifico los estados de todos los InputFields dentro del componente Form (los recibe como una ranura) para comprender si isValid = true para la entrada (luego para verificar si todos ellos son verdaderos, lo cual es simple )
Ahora estoy buscando una manera eficiente de hacerlo, y para asegurarme de que funcionará para múltiples formularios y entradas si lo tengo en un lugar diferente en la aplicación, no estoy buscando un truco rápido.
Aquí está el enlace a la aplicación: https://codesandbox.io/s/muddy-sun-0ti9m Puedes echar un vistazo para entender exactamente de lo que estoy hablando :)
Recapitularé: el objetivo principal es verificar si todas las entradas son válidas mediante la función de validación que les pasó, y si el formulario no es válido, no podrá enviarse.
¡Gracias a todos!
Hice algunos cambios en su código proporcionado, puede ver los cambios en este codesandbox . Lo que hice fue dejar que sus InputFields emitieran algo así como una identificación única, la identificación única de First Name es como firstname en mi ejemplo, y también su estado de validación. La función se llama checkValidation y la emisión se agrega a su implementación con @check-validation="checkValidation" .
Hay un nuevo objeto, que maneja múltiples estados de validación. Puede crearlo dinámicamente en el futuro, si desea que este intento sea genérico. El objeto es:
const formValidationObject = reactive({ firstname: false, lastname: false }); El checkValidation se ve así:
const checkValidation = (object) => { formValidationObject[object.data.id] = object.data.valid === true; }; Es una cosa simple. El object pasado con emit contiene el id , como "firstname", y el estado de validación. El formValidationObject con su clave será verdadero si object.data.valid es verdadero, si no, es falso.
Ahora podría hacer algo como pasar esto como accesorio a su Form.vue y manejar, si algo no está validado.