使用 FormProvider 时如何访问 formState.errors

Question

I'm building an abstract "deeply-nested" form component that uses FormProvider . I have error validation working at the field level, but I can't figure out how to access the errors object at the formState level.

The FormProvider docs say that "FormProvider requires all useForm methods," and the example code goes

export default function App() {
  const methods = useForm();
  const onSubmit = data => console.log(data);

  return (
    <FormProvider {...methods} > // pass all methods into the context
    ...

My (seemingly working) abstract form component looks like this:

let renderCount = 0;

function FormDialog(props) {
  const {
    open, onClose, loading, headline, noEscape, onFormSubmit, content, actions
  } = props;

  renderCount++;

  let validationSchema = YupObject().shape({});

  // construct schema
  content.forEach(item => {
    validationSchema = validationSchema.concat(YupObject().shape({
      [item.component.props.name]: item.validation
    }));
  });

  const methods = useForm({
    resolver: yupResolver(validationSchema)
  });

  return (
    <Dialog
      open={open}
      onClose={onClose}
      disableEscapeKeyDown={loading || noEscape}
    >
      <DialogTitle>{headline}</DialogTitle>
      <Box>
        Render Count: {renderCount}
      </Box>
      <FormProvider {...methods}>
        <DialogContent>
          <Box component="form" 
            sx={{
              onSubmit: methods.handleSubmit(onFormSubmit)
            }}
          >
            <FormContent content={content} />
          </Box>
          <HighlightedInformation>
          </HighlightedInformation>
        </DialogContent>
        <DialogActions>
          <FormActions actions={actions} />
        </DialogActions>
      </FormProvider>
    </Dialog>
  );
}

export default FormDialog;

Like that, it renders, displays "Render Count: 2" (because I'm in dev mode, therefore using React.StrictMode ) and nicely points out errors at the field level. However, I can't figure out how to access the formState errors property.

All of the examples I can find pull the formState out during the initial useForm call:

  const {
    register,
    handleSubmit,
    formState
  } = useForm();

However, I need to pull all of the methods out because of the FormProvider . It doesn't seem a good idea to explicitly restructure them all. Various things I've tried:

useFormState():

  ...
  const methods = useForm({
    resolver: yupResolver(validationSchema)
  });
  
  const { errors } = useFormState();
  console.log('errors', errors);
  ...

explicitly pass control

  const { errors } = useFormState( methods.control );
  console.log('errors', errors);

both result in TypeError: null is not an object (evaluating 'methods.control') .

Destructure methods to get to the object :

  const methods = useForm({
    resolver: yupResolver(validationSchema)
  });

  const { formState: {errors} } = methods;
  console.log('errors', errors);

Wrap in useEffect as described in the formState docs :

  useEffect(() => {
    console.log('errors:', methods.formState.errors);
  },[methods.formState]);

Both of the latter two result in infinite re-renders and the browser hanging.

So, how do I get to formState errors when using FormProvider and pulling out all of the methods ?

Answer 1

I've changed a few things and it seems to work now: Codesandbox

1. Don't pass onSubmit as sx prop. I think sx is supposed to only accept style props, not sure why it allows callbacks and etc.

2. Wrap form element around submit button, otherwise you won't be able to submit it.

3. ConnectForm was doing nothing so I removed it too, but not sure if it has any effect on the bug.