Estoy tratando de implementar un formulario con validación:
import React from 'react'; import { useForm } from "react-hook-form"; import axios, {AxiosResponse} from "axios"; import {Box, Button, Container, Grid, Typography} from "@material-ui/core"; import TextField from '@material-ui/core/TextField'; export async function postTicket(data: TicketDTO): Promise<AxiosResponse<TicketDTO[]>> { return await axios.post<TicketDTO[]>( `http://localhost:8080/api/support/tickets/create` ); } export interface TicketDTO { title?: string; } export default function OpenTicket(props: any) { const { register, handleSubmit, formState: { errors } } = useForm<TicketDTO>(); const onSubmit = async (data: TicketDTO) => { try { await postTicket(data); } catch (err) { console.log(err); } }; return ( <Container> <form onSubmit={handleSubmit(onSubmit)}> <TextField id="outlined-full-width" label="Name" {...register("title", { required: true, maxLength: 20 })} placeholder="Placeholder" helperText="Full width!" fullWidth margin="normal" InputLabelProps={{ shrink: true, }} variant="outlined" /> <Button variant="contained" color="primary" size="small" > Submit </Button> </form> </Container> ); }Caja de arena: https://stackblitz.com/edit/react-ts-4pnf8b?file=Hello.tsx
Pero cuando hago clic en el botón Enviar, no pasa nada. ¿Me gustaría usar los mensajes de validación predeterminados de Materia-ui? ¿Sabes dónde me equivoco?
He hecho algunas modificaciones a su código,
submitNo estoy muy seguro de lo que está haciendo en su evento de envío. Ignorando por ahora.
https://stackblitz.com/edit/react-ts-dufrzd?file=Hello.tsx
<form onSubmit={handleSubmit(onSubmit)}> <TextField id="outlined-full-width" label="Name" required placeholder="Placeholder" helperText="Full width!" fullWidth margin="normal" InputLabelProps={{ shrink: true, }} inputProps={{maxLength:20}} variant="outlined" /> <Button variant="contained" color="primary" size="small" type="submit"> Submit </Button> </form>