Estoy creando un formulario de varios pasos y quiero generar un error si mi campo 'title' e invited[0].name (al menos debe escribirse un invitado) no se completan en mi formulario como ' este campo es obligatorio ' en rojo debajo del cuadro de entrada. Uso Yup pero no parece funcionar... ¿Alguna idea?
export default function Information() { const [userData, setUserData] = useState({}); const handleChange = (e) => { const { value, checked } = e.target; setUserData((userData) => ({ ...userData, [value]: checked })); }; return ( <div className="flex flex-col "> <div> Title : <input onChange={handleChange} value={userData["title"]} name="title" placeholder="Title" /> </div> ... ); }En validación.js:
import * as Yup from "yup"; import menus from "../data/menus.json"; const { menus: { title, invited } } = menus; export default [ Yup.object().shape({ [title]: Yup.string().required(`Title required`), [invited.name]: Yup.string().required(`At least one participant required`) }) ];menús.json:
{ "menus": [ { "id": "Menu1", "title": "Soup", "price": 4, "invited": [ { "name": "Jose Luis", "location": "LA" }, { "name": "Smith", "location": "New York" } ] }, ... }Aquí está mi sandboxLink
Yup.array() para definir el esquema de la matriz ( invited ) y .of() para apuntar a cada elemento de la matriz (que es un objeto en su caso).Cambie la validación.js a
import * as Yup from "yup"; import menus from "../data/menus.json"; const { menus: { title, invited } } = menus; export default Yup.object().shape({ title: Yup.string().required(`Title required`), invited: Yup.array() .of( Yup.object().shape({ name: Yup.string().required('Required') // these constraints take precedence }) ) .required('At least one participant required') // these constraints are shown if and only if inner constraints are satisfied .min(1, 'At least one participant required'), });