I want to create dynamic Form using Formik and Yup. On plus button press, new inputs should be added. However when I create validation schema, onSubmit method is not calling. When I delete validationSchema I can see the log in my console.

Here is my code:

interface Props {
    data?: string;
    onSubmit?: Function
}

interface IFormValues {
    people: {name: string, surname: string}[]
}


const FieldComponent = ({field, form: { touched, errors }}) => {
    const error = getIn(errors, field.name);
    const touch = getIn(touched, field.name);
    return (
        <div>
            <input type="text" name={field.name} onChange={field.onChange}/>
            {touch && error ? <p>{error}</p> : null}
        </div>
    )
}

const FieldArrayComponent = (arrayHelpers) => (
    <div>
        {arrayHelpers.form.values.people.map((person, index) => (
            <div key={index}>
                <Field name={`people.${index}.name`} ponent={FieldComponent}/>
                <Field name={`people.${index}.surname`} ponent={FieldComponent}/>
                <button type="button" onClick={() => arrayHelpers.push({name: '', surname: ''})}>+</button>
                <button type="button" onClick={() => arrayHelpers.remove(index)}>-</button>
            </div>
        ))}
    <div>
        <button type="submit">Submit</button>
    </div>
</div>
)

export const FormComponent: React.FunctionComponent<Props> = (props) => {
    const initialValues: IFormValues = {
        people: [{name: '', surname: ''}]
    }
    const schema = yup.object().shape({
        people: yup.array().of(
            yup.object().shape({
                name: yup.string().required('Required'),
                surname: yup.string().required('Required')
            })
        )
    })
    return (
        <Formik
        initialValues={initialValues}
        onSubmit={values => {
            console.log(values);
        }}
        validationSchema={schema}
        render={({ values }) => (
          <Form>
            <FieldArray
                name="people"
                ponent={FieldArrayComponent}
            />
          </Form>
        )}
      />
    )
}

Can you take a look what I am doing wrong?

I want to create dynamic Form using Formik and Yup. On plus button press, new inputs should be added. However when I create validation schema, onSubmit method is not calling. When I delete validationSchema I can see the log in my console.

Here is my code:

interface Props {
    data?: string;
    onSubmit?: Function
}

interface IFormValues {
    people: {name: string, surname: string}[]
}


const FieldComponent = ({field, form: { touched, errors }}) => {
    const error = getIn(errors, field.name);
    const touch = getIn(touched, field.name);
    return (
        <div>
            <input type="text" name={field.name} onChange={field.onChange}/>
            {touch && error ? <p>{error}</p> : null}
        </div>
    )
}

const FieldArrayComponent = (arrayHelpers) => (
    <div>
        {arrayHelpers.form.values.people.map((person, index) => (
            <div key={index}>
                <Field name={`people.${index}.name`} ponent={FieldComponent}/>
                <Field name={`people.${index}.surname`} ponent={FieldComponent}/>
                <button type="button" onClick={() => arrayHelpers.push({name: '', surname: ''})}>+</button>
                <button type="button" onClick={() => arrayHelpers.remove(index)}>-</button>
            </div>
        ))}
    <div>
        <button type="submit">Submit</button>
    </div>
</div>
)

export const FormComponent: React.FunctionComponent<Props> = (props) => {
    const initialValues: IFormValues = {
        people: [{name: '', surname: ''}]
    }
    const schema = yup.object().shape({
        people: yup.array().of(
            yup.object().shape({
                name: yup.string().required('Required'),
                surname: yup.string().required('Required')
            })
        )
    })
    return (
        <Formik
        initialValues={initialValues}
        onSubmit={values => {
            console.log(values);
        }}
        validationSchema={schema}
        render={({ values }) => (
          <Form>
            <FieldArray
                name="people"
                ponent={FieldArrayComponent}
            />
          </Form>
        )}
      />
    )
}

Can you take a look what I am doing wrong?

• javascript
• reactjs
• forms
• formik

1 Answer 1

The purpose of passing validationSchema is to ensure that onSubmit doesn't get called if there are errors. I created a working example from your code. Have a look: https://stackblitz./edit/demo-react-formik-validation-schema

You can see that onSubmit does get called if there are no errors. But if required fields are empty, onSubmit does not get called. That is the expected behavior.

However, if your intention was to debug in the case when errors are there (which is what I need to do quite often), checkout render method of Formik in which you can console.log(values, errors) to see the form errors or values instead of logging in onSubmit.

render = {({ values, errors }) => {
  console.log(values, errors);
  return <Form>
    <FieldArray
      name="people"
      ponent={FieldArrayComponent}
    />
  </Form>
}}