Hay un formulario que contiene dos entradas, se requiere una cadena y un número.
Aquí está el esquema:
const schema = yup.object().shape({ name: yup.string().required(), age: yup.number().required() });Luego, es reaccionar-gancho-forma:
const { handleSubmit, reset, control, register, watch } = useForm({ defaultValues: emptyObject, resolver: yupResolver(schema) }); Como puede ver, hay valores defaultValues que tienen emptyObject .
Aquí está:
const emptyObject = { name: '', age: 0 } La parte del name funciona bien, no puedo enviar los datos si no hay una entrada escrita en ese cuadro de texto, pero para la edad no requiere ningún valor. Sé que verifica el valor y encuentra que es 0 y considera que hay una entrada.
Pero, ¿cómo cambiarlo para que funcione? Intenté con null pero todavía no funciona.
Debo mencionar que es React with Typescript, por lo que también hay una interfaz que arroja un error cuando la edad se establece en null .
MyData: { name: string; age: number; }Haga que la age también sea una string vacía, solo para sus necesidades y cuando sea el momento de enviar el formulario, simplemente agregue alguna funcionalidad para convertir la cadena en un número si es crítico para su aplicación.
Desde DOCS, no puede establecerlo en ningún valor undefined :
Se recomienda que establezca un valor predeterminado para todas las entradas en no indefinido, como la cadena vacía o nulo.
Obtuve esto de https://react-hook-form.com/get-started#Applyvalidation
import React from "react"; import { useForm, SubmitHandler } from "react-hook-form"; interface IFormInput { firstName: string; lastName: string; age: number; } export default function App() { const { register, handleSubmit } = useForm<IFormInput>(); const onSubmit: SubmitHandler<IFormInput> = data => console.log(data); return ( <form onSubmit={handleSubmit(onSubmit)}> <input {...register("firstName", { required: true, maxLength: 20, placeHolder: "John" })} /> <input {...register("lastName", { pattern: /^[A-Za-z]+$/i })} /> <input type="number" {...register("age", { min: 18, max: 99 })} /> <input type="submit" /> </form> ); }¿Puede ser este un ejemplo para seguir?