Formik

Quando costruisci un Form, puoi utilizzare il componente <FormikAugmented /> per avere a disposizione degli strumenti avanzati di gestione della validazione e della modificabilità dei campi.

FormikAugmented va sempre utilizzato assieme a uno schema di validazione di Yup, ad esempio:

<FormikAugmented<EntityDto>

validationSchema={EntitySchema}

validationContext={{}}

>

{...}

</FormikAugmented>

FormikAugmented

Il componente FormikAugmented permette di associare a un Form di Formik un validatore di Yup in modo più potente rispetto alle capacità standard, rendendo possibile l'introspezione dello schema per, ad esempio, capire quale campi sono modificabili in base al contesto, oppure quali sono richiesti per visualizzare un indicatore visivo.

Dato che <FormikAugmented> estende <Formik> puoi sostituire il componente semplicemente eliminando la proprietà validate e inserendo lo schema e il context:

-<Formik<EntityDto>

+<FormikAugmented<EntityDto>

+ validationSchema={EntitySchema}

+ validationContext={{}}

- validate={schemaToValidator(EntitySchema, { context: {} })}

>

Componenti di Input

FormFieldItem

I FormFieldItem supportano nativamente FormikAugmented, quindi puoi utilizzarli senza configurazioni aggiuntive.

Ad esempio, renderizzano un asterisco rosso quando il campo è richiesto (.required())

FormItem

I FormItem non supportano ancora la versione FormikAgumented. Puoi implementarli utilizzando useFormikFieldValidation()

Componenti personalizzati

Per i componenti personalizzati, puoi utilizzare l'hook useFormikFieldValidation().

useFormikFieldValidation

L'hook di React useFormikFieldValidation ti permette di effettuare l'introspezione dello schema di Yup associato a uno specifico campo per sapere le sue proprietà di validazione.

const validation = useFormikFieldValidation('supplierId');

Return type

L'hook ritorna un oggetto con le proprietà descritte nella seguente tabella.

Proprietà	Descrizione
editable	Campo modificabile
required	Richiesto nello schema
stripped	Rimosso dallo schema di Yup (non deve essere modificabile, infatti editable è false)
label	Label del campo come indicato su Yup