Differences
This shows you the differences between two versions of the page.
|
pw:laboratoare:06 [2023/03/12 14:40] ciprian.dobre [Formulare] |
pw:laboratoare:06 [2023/05/08 09:55] (current) ciprian.dobre [Scopul laboratorului] |
||
|---|---|---|---|
| Line 4: | Line 4: | ||
| ===== Scopul laboratorului ===== | ===== Scopul laboratorului ===== | ||
| - | In acest laborator vom intra in detaliu legat de gestionarea starii aplicatiei folosind de **hook**-uri si **Redux Toolkit**. Motivul pentru care este nevoie de gestiunea starii aplicatiei este ca anumite componente in diferite locatii ale aplicatiei au nevoie sa imparta aceleasi date. O posibilitate pentru a propaga datele la mai multe componente este ca o compenta parinte sa trimita la descendentii sai datele prin proprietati din copil in copil, insa aceasta abordare poate aglomera componentele si duce la cod greu de gestionat. Alternativa cea mai buna este ca datele partajate de diferite componente sa fie puse la dispozitie printr-o stare globala accesibila prin functii speciale numite hooks. De asemnea, vom prezenta in acest laborator si modalitati de a crea formulare pentru a executa mutatii pe backend si cum puteti gestiona starea formularului cu validarea datelor introduse. | + | In acest laborator vom intra in detaliu legat de gestionarea starii aplicatiei folosind **hook**-uri si **Redux Toolkit**. Motivul pentru care este nevoie de gestiunea starii aplicatiei este ca anumite componente in diferite locatii ale aplicatiei au nevoie sa imparta aceleasi date. O posibilitate pentru a propaga datele la mai multe componente este ca o compenta parinte sa trimita la descendentii sai datele prin proprietati din copil in copil, insa aceasta abordare poate aglomera componentele si duce la cod greu de gestionat. Alternativa cea mai buna este ca datele partajate de diferite componente sa fie puse la dispozitie printr-o stare globala accesibila prin functii speciale numite hooks. De asemnea, vom prezenta in acest laborator si modalitati de a crea formulare pentru a executa mutatii pe backend si cum puteti gestiona starea formularului cu validarea datelor introduse. |
| ===== Gestionarea starii ===== | ===== Gestionarea starii ===== | ||
| Line 226: | Line 226: | ||
| De multe ori o sa aveti nevoie de a crea formulare pentru a adauga/schimba date pe backend. In HTML aveti multe elemente care functioneaza ca input-uri pentru formulare, ex. select, textbox, checkbox etc. Pentru React bibliotecile de UI cum este si Material UI expun aceste input-uri deja stilizate si cu atribute care va pot ajuta pentru a controla componentele respective. | De multe ori o sa aveti nevoie de a crea formulare pentru a adauga/schimba date pe backend. In HTML aveti multe elemente care functioneaza ca input-uri pentru formulare, ex. select, textbox, checkbox etc. Pentru React bibliotecile de UI cum este si Material UI expun aceste input-uri deja stilizate si cu atribute care va pot ajuta pentru a controla componentele respective. | ||
| - | O mare problema in definirea formularelor nu este neaparat cum se pot controla componentele din formular ci validarea formularului. | + | Problemele in definirea formularelor este atat controla componentelor din formular cat si validarea formularului, ne dorim ca formular sa valideze datele pana sa fie trimis catre backend cat si sa se schimbe la diferite actiuni ale utilizatorului cum ar fi pentru afisarea erorilor sau pentru ascunderea unur campuri. Pentru controlarea componentelor vom folosi **[[https://react-hook-form.com/|react-hook-form]]** iar pentru validarea formularului [[https://www.npmjs.com/package/yup|Yup]]: |
| + | |||
| + | ''npm install react-hook-form yup @hookform/resolvers'' | ||
| + | |||
| + | Folosind **useForm** putem obtine starea si actiuni de modificare pe starea unui formular dandu-se o anumita schema pentru formular iar cu yup putem definii o schema de validare pentru starea formularului care printr-un **resolver** va impiedica formularul sa fie submis daca nu se respecta schema de validare si va returna mesaje de eroare. In exemplul de mai jos aveti definirea unui formular simplu unde se defineste schema de validare si campurile formularului intr-un controller. | ||
| <code> | <code> | ||
| Line 326: | Line 330: | ||
| } | } | ||
| </code> | </code> | ||
| + | |||
| + | Pentru componenta de UI trebuie folosit formularul in interiorul unui element de tip **form** unde se specifica ca atribut functia de submitere. In interiorul formularului se leaga variabilele la input-urile de form si ca sa se submita trebuie sa existe un buton de tip "submit" care va apela functia specificata in form cu datele din formular asa cum aveti ca exemplu mai jos. | ||
| + | |||
| + | <code> | ||
| + | export const LoginForm = () => { | ||
| + | const { formatMessage } = useIntl(); | ||
| + | const { state, actions, computed } = useLoginFormController(); // Use the controller. | ||
| + | |||
| + | return <form onSubmit={actions.handleSubmit(actions.submit)}> {/* Wrap your form into a form tag and use the handle submit callback to validate the form and call the data submission. */} | ||
| + | <Stack spacing={4} style={{ width: "100%" }}> | ||
| + | <ContentCard title={formatMessage({ id: "globals.login" })}> | ||
| + | <Grid container item direction="row" xs={12} columnSpacing={4}> | ||
| + | <Grid container item direction="column" xs={12} md={12}> | ||
| + | <FormControl | ||
| + | fullWidth | ||
| + | error={!isUndefined(state.errors.email)} | ||
| + | > {/* Wrap the input into a form control and use the errors to show the input invalid if needed. */} | ||
| + | <FormLabel required> | ||
| + | <FormattedMessage id="globals.email" /> | ||
| + | </FormLabel> {/* Add a form label to indicate what the input means. */} | ||
| + | <OutlinedInput | ||
| + | {...actions.register("email")} // Bind the form variable to the UI input. | ||
| + | placeholder={formatMessage( | ||
| + | { id: "globals.placeholders.textInput" }, | ||
| + | { | ||
| + | fieldName: formatMessage({ | ||
| + | id: "globals.email", | ||
| + | }), | ||
| + | })} | ||
| + | autoComplete="username" | ||
| + | /> {/* Add a input like a textbox shown here. */} | ||
| + | <FormHelperText | ||
| + | hidden={isUndefined(state.errors.email)} | ||
| + | > | ||
| + | {state.errors.email?.message} | ||
| + | </FormHelperText> {/* Add a helper text that is shown then the input has a invalid value. */} | ||
| + | </FormControl> | ||
| + | </Grid> | ||
| + | <Grid container item direction="column" xs={12} md={12}> | ||
| + | <FormControl | ||
| + | fullWidth | ||
| + | error={!isUndefined(state.errors.password)} | ||
| + | > | ||
| + | <FormLabel required> | ||
| + | <FormattedMessage id="globals.password" /> | ||
| + | </FormLabel> | ||
| + | <OutlinedInput | ||
| + | type="password" | ||
| + | {...actions.register("password")} | ||
| + | placeholder={formatMessage( | ||
| + | { id: "globals.placeholders.textInput" }, | ||
| + | { | ||
| + | fieldName: formatMessage({ | ||
| + | id: "globals.password", | ||
| + | }), | ||
| + | })} | ||
| + | autoComplete="current-password" | ||
| + | /> | ||
| + | <FormHelperText | ||
| + | hidden={isUndefined(state.errors.password)} | ||
| + | > | ||
| + | {state.errors.password?.message} | ||
| + | </FormHelperText> | ||
| + | </FormControl> | ||
| + | </Grid> | ||
| + | </Grid> | ||
| + | </ContentCard> | ||
| + | <Grid container item direction="row" xs={12} className="padding-top-sm"> | ||
| + | <Grid container item direction="column" xs={12} md={7}></Grid> | ||
| + | <Grid container item direction="column" xs={5}> | ||
| + | <Button type="submit" disabled={!isEmpty(state.errors) || computed.isSubmitting}> {/* Add a button with type submit to call the submission callback if the button is a descended of the form element. */} | ||
| + | {!computed.isSubmitting && <FormattedMessage id="globals.submit" />} | ||
| + | {computed.isSubmitting && <CircularProgress />} | ||
| + | </Button> | ||
| + | </Grid> | ||
| + | </Grid> | ||
| + | </Stack> | ||
| + | </form> | ||
| + | }; | ||
| + | </code> | ||
| + | |||
| + | ===== Resurse utile ===== | ||
| + | |||
| + | * Aplicatia [[https://gitlab.com/mobylabwebprogramming/reactfrontend|demo]] a noastra | ||
| + | * [[https://redux-toolkit.js.org/|Redux Toolkit]] | ||
| + | * [[https://www.npmjs.com/package/yup|Yup]] | ||
| + | * [[https://react-hook-form.com/|react-use-form]] | ||
