Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

How can I access data from Form outside react-final-form

See original GitHub issue

So, I would like to acess the data from Form outside him, for example, I have multiple forms in only a page:

<Form
  validate={validate}
  onSubmit={ (values, props) => props.reset() }
  render={
  ({handleSubmit, invalid, ...props}) => {
    return(
      <form onSubmit={handleSubmit}>
      ...
      </form>
    )
  }}
</Form>

<Form
  validate={validate}
  onSubmit={ (values, props) => props.reset() }
  render={
  ({handleSubmit, invalid, ...props}) => {
    return(
      <form onSubmit={handleSubmit}>
      ...
      </form>
    )
  }}
</Form>

//And I want check if all forms are valid, for example:
<button disable={ form1.invalid || form2.invalid }></button>

Someone have a idea about that?

Issue Analytics

State:
Created 5 years ago
Reactions:8
Comments:12

Top GitHub Comments

22reactions

rflmykcommented, Feb 8, 2019

Nice, I did it:

export const myForm = ({subscription, ...props}) => {
	return(
		<Form
			onSubmit={(val)=> console.log(val)}
			subscription={subscription}
			render={({handleSubmit}) => (
				<form onSubmit={handleSubmit}>
				....
				<FormSpy
					subscription={{values: true, valid: true}}
					onChange={(state) => {
						const {values, valid} = state
						props.exposeValues({values, valid})
					}} />
				</form>
			)}
		/>
	)
}

Work very well for me, thanks dude, cya

5reactions

bertho-zerocommented, Nov 2, 2020

// useConstant.js
import { useRef } from 'react';

export default function useConstant(init) {
  const initiated = useRef(false);
  const ref = useRef(undefined);

  if (!initiated.current) {
    initiated.current = true;
    ref.current = init();
  }

  return ref.current;
}

import { createForm } from 'final-form';

function MyComponent() {
  // `form` can also come from props, if needed
  const form = useConstant(() => createForm({
    initialValues,
    onSubmit
  }));

  // use your form...

  return (
    <Form
      form={form}
      render={() => {
        // You're <form />
      }}
    />
  );
}

https://github.com/final-form/react-final-form/blob/92cd23e237b43d1dd8e5598381ab58ae8f97f9ed/src/ReactFinalForm.js#L58-L74