What does Formik do?
- Track form state
- Handles form submission
- Handles validation and error messages
Install
yarn add formik yup
Usage template
const ExampleComponent = () => { const validationSchema = Yup.object().shape({ company: Yup.string() .required('Select a company'), employee: Yup.object() .typeError('Select an employee') .required('Select an employee'), newName: Yup.string() .required('Enter a valid name') .min(2, 'Name must have at least 2 characters') }) const onSubmit = async (values, {setSubmitting, setErrors, setStatus, resetForm, setFieldValue}) => { // Work with values // .... // Reset form resetForm({}) setFieldValue('company', values.company) setStatus({success: true}) } catch(error) { setStatus({success: false}) setSubmitting(false) setErrors({submit: error.message}) } } return <> <Formik initialValues={ { company: '', employee: null, newName: '' } } onSubmit={onSubmit} validationSchema={validationSchema}> {({ setFieldValue, handleSubmit, values, errors, isValid, touched }) => ( <> <Text style={{ color: 'red' }}>{errors.company}</Text> <SelectCompany selectedCompany={values.company} setFieldValue={setFieldValue} companyList={companyList} /> ... <ButtonSubmit onClick={handleSubmit} disabled={!isValid} // Disable Button when form is not valid title={'Submit'}/> </> )} </Formik> </> } export default ExampleComponent
How to reset form after submit?
// Reset form resetForm({}) // Keep value for only 1 field (other fields are reset) setFieldValue('company', values.company)
How to “setFieldValue” for different fields at the same time?
When “setFieldValue” for a field and reset another filed at the same time like this, Yup will still set error for first field
setFieldValue('company', val) setFieldValue('employee', null)
You need to do like this
setFieldValue('company', val) setTimeout(() => setFieldValue('employee', null))
How to show error message only when pressing Submit?
// Change <Text style={{ color: 'red' }}>{errors.company}</Text> // To <Text style={{ color: 'red' }}>{touched.company && errors.company}</Text>
How to disable submit button when form is not valid
{({ ... isValid ... }) => ( ... <ButtonSubmit onClick={handleSubmit} disabled={!isValid} // Disable Button when form is not valid title={'Submit'} />
How to update “initialValues” outside form?
<Formik enableReinitialize initialValues={props.initialValues} ...
Use “enableReinitialize“. enableReinitialize
doesn’t change anything.
- If form hasn’t been touched (
dirty
= false) the form is re-rendered if any property ininitialValues
is changed from outside ofFormik
- Once the form is changed by any user input (
dirty
= true), changes to theinitialValues
triggers the render function but does not re-write thevalues
within the form
How to “setFieldValue” from “useEffect”?
const formikRef = useRef() useEffect = (() => { .... if (formikRef.current) { formikRef.current.setFieldValue( "keyName", value ) } ... }) ... <Formik innerRef={formikRef} initialValues={initialValues} validationSchema={validSchema} onSubmit={onSubmit}>
Leave a Reply