https://github.com/smailen5/react-form-exercise

https://github.com/smailen5/react-form-exercise

Last synced: 2 months ago
JSON representation

• Host: GitHub
• URL: https://github.com/smailen5/react-form-exercise
• Owner: Smailen5
• Created: 2024-05-08T17:30:28.000Z (9 months ago)
• Default Branch: main
• Last Pushed: 2024-05-10T16:37:28.000Z (9 months ago)
• Last Synced: 2024-05-10T17:38:25.564Z (9 months ago)
• Language: JavaScript
• Size: 101 KB
• Stars: 0
• Watchers: 1
• Forks: 0
• Open Issues: 0
• Metadata Files:
  • Readme: README.md

Awesome Lists containing this project

README

        
# Form sample

- Esercizio form per React utilizzando react hook form

# Obbiettivi

- validazione per ogni campo

- utilizzo della libreria react-hook-form

- rendere esteticamente bella la pagina

# Roba installata

- react (vedi installazione ufficiale vite+react)

- tailwind (vedi installazione tailwind ufficiale per vite)

- `npm i react-hook-form`

- `npm i -D @hookform/devtools`

# Codice usato

Questo va bene ma e possibile usare un oggetto per passarli piu proprieta:

```js

validate: (fieldValue) => {

    return (

    fieldValue !== "[email protected]" ||

    "Inserisci una email diversa"

    );

}

```

Ricorda di aggiungere 

```js

```

alla fine del form, ricorda inoltre che devi passare `{ control }` a chi sta usando `useFrom()`

- Nel form puoi usare `{ valueAsNumber: true }` o `{ valueAsDate: true }` per cambiare direttamente i valori da stringa 

Puoi passare come argomento anche un array a `watch(['username', 'email'])`

# Links utili

- Documentazione [React hook form](https://react-hook-form.com/get-started)

- regex per validazione email [regexr.com](https://regexr.com/3e48o)

- Dati di esempio [jsonplaceholder](https://jsonplaceholder.typicode.com/)