2-DR2-AT.09

Author: mattolivr

2-desenvolvimento-front-end/DR2-fundamentos-de-react/DR2-AT-ecommerce-dummy-crud/src/pages/product-form/index.jsx

@@ -4,7 +4,7 @@ import axios from 'axios';
 import style from './style.module.css';
 
 export default function ProductForm() {
-  const { register, handleSubmit } = useForm();
+  const { register, handleSubmit, formState: { errors } } = useForm();
   const navigate = useNavigate();
 
   const onSubmit = async (data) => {
@@ -33,26 +33,29 @@ export default function ProductForm() {
           <input
             id="title"
             type="text"
-            {...register('title')}
+            {...register('title', { required: 'O título é obrigatório' })}
           />
+          {errors.title && <span className={style.erro}>{errors.title.message}</span>}
         </div>
 
         <div className={style.campo}>
           <label htmlFor="price">Preço:</label>
           <input
             id="price"
             type="number"
-            {...register('price')}
+            {...register('price', { required: 'O preço é obrigatório' })}
           />
+          {errors.price && <span className={style.erro}>{errors.price.message}</span>}
         </div>
 
         <div className={style.campo}>
           <label htmlFor="description">Descrição:</label>
           <textarea
             id="description"
             rows="4"
-            {...register('description')}
+            {...register('description', { required: 'A descrição é obrigatória' })}
           />
+          {errors.description && <span className={style.erro}>{errors.description.message}</span>}
         </div>
 
         <div className={style.campo}>