Formik based form samples

[reinhard]

No description provided.

[mepheser]

Error handling

[mepheser]

@reinhard Why not check this directly in Form using name: yup.string().matches(insertRegexHere).required()?
If this is an example for server side errors: I think these should be treated the "normal" redux way, meaning an FORMS_POST_USER_ERROR action is thrown and reducer saves userPostError.

This userPostRestError may be injected to UserForm and used as "external" error to be added to internal formik errors like

const UserForm = ({user, onSubmit, restError}:Props) => {
  return (
    <Formik
      key={user.id + user.lastModified.toString()}
      displayName="UserForm"
      onSubmit={(values, {setErrors}) => onSubmit(values, setErrors)}
      initialValues={user}
      validateOnChange={false}
      validationSchema={validationSchema}
      render={({values, errors, touched, setErrors}) => {
       if (restError) {
           // setErrors(..add external restErrors if present)
       }
        return (
          <Form>
            <FormRow name="name" label="Name" errors={errors} touched={touched} />
            <FormRow name="email" label="E-Mail" errors={errors} touched={touched} />
            <AddressesForm values={values} errors={errors} touched={touched} />
            <Box mt={2}>
              <ButtonLink>
                <Link to="/forms">Cancel</Link>
              </ButtonLink>
              <button type="submit">Save</button>
              //  or render "general" rest errors like "internal server error" without binding to a field
              {(restError) && <div> Error saving user: {restError}
            </Box>
          </Form>
        )
      }}
    />
  )
}