As of May 31, 2023, we have updated our Code of Conduct.

Questions tagged [final-form]

🏁 Framework agnostic, high performance, subscription-based form state management

Filter by
Sorted by
Tagged with
1 vote
0 answers
46 views

How to watch an array field in react hook form?

i am migrating an existing complex react app using react-final-form to use react-hook-form and i don't know how to implement something like decorators used in final-form. For example i have multiple ...
Sneader's user avatar
  • 11
0 votes
1 answer
32 views

Final form: revalidate form after validator remove

I have a form level validator on my fields and setState function to remove it. const [validator, setValidator] = useState((value) => {...}); <Field name="name" component={...
Artem Loginov's user avatar
0 votes
0 answers
37 views

How to check if there is a duplicated field name within my form before register?

I am trying to identify whether within my react final form I have a duplicated name field and then throw an error. I have tried to use a decorator on registerField() and it seems to work fine, however,...
danH's user avatar
  • 105
0 votes
0 answers
47 views

How can edit an array inside a form with react-final-form and FieldArray

i'm so desperate I have a form, inside this an array form, created with FielArray, now what I want is to be able to edit this array of the form. I managed to print the values of the array, but now I ...
ddaudiosolutions's user avatar
1 vote
0 answers
74 views

Looking to sort the column where cell renders select with ANTD

I am using the antd table to render the data and render select as cell data like the one below in the image, but having problems with sorting the same column based on the selected option name. The ...
kumar425's user avatar
0 votes
0 answers
35 views

final-form-arrays - Nested arrays mutations - Dynamic array of dynamic array

How do I use final-form-arrays in MultiSelectInput which handle payload as presented in the image? Framework - React.js Form handler - final-form + final-form-arrays The problem is, its nested ...
Janis Basis Basovs's user avatar
0 votes
1 answer
421 views

How to unit test react final form's Field Components?

I am writing a form component using react-final-form library. As component starts growing, I split it into multiple sub components such that parent component has the <Form>{... }</Form> ...
Dev9999's user avatar
  • 51
0 votes
1 answer
269 views

React final form with datepicker validation

Is there any way to display error message if the validation on the Field level fails when using react datepicker? I am using datepicker with react final form: const DatePickerAdapter = ({ input: { ...
Alex T's user avatar
  • 3,517
0 votes
0 answers
81 views

Is it possible to access form state such as "invalid" outside of the <Form /> component in React Final Form?

I've been trying to figure out if it is possible to access the form state such as "invalid" outside of the component in React Final Form. I have a use case where I need to render the submit ...
Sungho Cho's user avatar
1 vote
1 answer
212 views

Why List element only gets selected when clicked twice?

I am building a React application and using react-final-form library. I am rendering a select component, but on selecting an item it doesn't get selected. On selecting again, then only it gets ...
Dev9999's user avatar
  • 51
1 vote
1 answer
921 views

How to set React Final Form values on request and validate after that?

I have kind of a convoluted use case here. I have an API that responds with a JSON that maps to React components, including form fields (their values, validations, etc). Every component in the page ...
sbstnssndn's user avatar
1 vote
0 answers
229 views

React final-form field change while remounting the field seems to not work

I have a form in which I'm listening to changes in a field. Based on this field value, I'm setting the values for another field with form.change('name', 'value') function. The thing is, that the form ...
gandalfml's user avatar
  • 898
0 votes
1 answer
705 views

How to get propperly FormState (dirtyFields, prestine, etc.) in handleSubmit function using React-Final-Form

Basically, I just want to get only that fields, that were changed (dirty). How should I get them inside submit handler? (I need to post only changed fields to API) const handleSubmitSettings = (fields,...
George's user avatar
  • 1
0 votes
0 answers
1k views

React final form change function doesn't work correctly

I'm trying to play around with React-Final-Form library, Here is my sandbox link : https://codesandbox.io/s/nice-vaughan-czk7g9?file=/src/index.js When I click on 'Change' button, I want the country ...
Dev9999's user avatar
  • 51
1 vote
1 answer
527 views

Final Form reset specific field value

I have two Field components, a Parent and a Child. As Child is dependant on the Parent, I want to reset Child whenever Parent is updated. I tried this: <Field name="parent"> ...
Damjan Vučina's user avatar
2 votes
0 answers
327 views

How to reset stale errors when swapping validate functions in react-final-form

So I've read the docs, and the tests surrounding the <Field /> component and understand why there is some inconsistencies with stale error messages when swapping validations as per https://...
ericchernuka's user avatar
0 votes
1 answer
725 views

Unable to set initialValues on checkboxes through Field in react final form

I'm having issues with initialValues in my project, where I'm using react-final-form. What I'm looking for is to have multiple initialValues to be set on the list of checkboxes. I'm aware of the ...
Olafur's user avatar
  • 25
0 votes
1 answer
348 views

How to integrate Quill (rich-text-editor) with react-final-form?

How to integrate Quill (rich-text-editor) with react-final-form?
Hola's user avatar
  • 329
1 vote
1 answer
4k views

React final form how to manually trigger validation

I would like to call validate manually, can we do it from final form API? I've searched on the doc but didn't see any instruction about it. My situation is that when I update the validate function, it ...
Quoc Van Tang's user avatar
1 vote
1 answer
157 views

Validate raw data from the field in react-final-form

I have a field in react-final-form where the user enters a date. For the internal value this gets normalized to YYYY-MM-DD but the user may enter it as DD.MM.YYYY. For valid data this is all fine, I ...
ThiefMaster's user avatar
0 votes
1 answer
379 views

How to prevent react-final-form from rendering an specific input

I have a react-final-form form, which has 2 inputs. Let's call them from and to. What I want to do is that whenever input from changes, I set a value for input to based on input from's value. I do ...
Matin's user avatar
  • 66
0 votes
1 answer
306 views

React final forms how to add child forms

Have the sandbox with working React forms array https://codesandbox.io/s/react-final-form-field-arrays-react-beatiful-dnd-as-drag-drop-forked-uz24z?file=/index.js:5933-6061 Which in result of click on ...
S.M. Pat's user avatar
  • 302
1 vote
0 answers
160 views

Semantic React UI controlled components not working with React Final Form

This question has also been raised on the react-final-form github issues list at https://github.com/final-form/react-final-form/issues/939 I'm using Semantic React UI 2.02 with react-final-form 6.5.3. ...
Rob de V's user avatar
2 votes
1 answer
1k views

React Admin - How to disable validation onChange

I'm using react-admin, and I have a huge form, with a bunch of custom validation. It's very slow, even with the build version. I tried to find a way to disable the validation on change and to have it ...
Guybrush's user avatar
1 vote
1 answer
335 views

Field Form doesn't update selected value in option

I've React Final Form in my project. I have a problem with updating the displayed option in select. The entire form works fine, but doesn't change the display value. function App() { const [...
kozdro's user avatar
  • 103
2 votes
1 answer
5k views

ReactJS set min and max value for number input using final-form-material-ui

I'm using final-form and final-form-material-ui I want to set min and max values for number inputs. Already tried InputProps={{ inputProps: { min: 0, max: 10 } }} but it doesn't work. Also I want to ...
Ati's user avatar
  • 193
2 votes
0 answers
282 views

The page is lagging because of Yup validation

I'm trying to make a form with around 20 fields. The libraries, platforms I'm using: Material UI Final Form React Final Form MUI-RFF Yup So when I create the form, everything works fine. But after I ...
Agent K's user avatar
  • 397
0 votes
2 answers
1k views

meta.touched is not getting true on form submit in react-final-form

I have gone through a similar problem but that did not resolve my issue. I am working on a React app and React final form, According to the react final form developer the meta.touched will be true on ...
SURYANARAYAN RATH's user avatar
2 votes
0 answers
164 views

React-final-form | Form field validation with external field dependencies

I have a problem on my current MVC (DotNet) application. My form is render with classic MVC and inside it another "form" with react-final-form. I need to validate a field in my react form ...
CyrilJ's user avatar
  • 49
0 votes
2 answers
911 views

React-Final-Form delays in taking input with render props in Field

I am currently working on a react project. I am using react-final-form for fetching the data in the form. As I am using the material UI component to create the form I am creating the form somewhat ...
SURYANARAYAN RATH's user avatar
2 votes
0 answers
1k views

Custom input validation in react-final-form

I have set up a custom TimePicker component which I want to connect to react-final-form. Form <Form onSubmit={onSubmit} render={({ handleSubmit, form, submitting, pristine }) => ( <...
tomole's user avatar
  • 897
0 votes
0 answers
3k views

What is the right way to use FormSpy in React Final Form as an alternative to Redux-Form isDirty?

I have a large (3+ year old) React Redux project which uses a lot of Redux-Form. As that is now discontinued I am doing new features in react-final-form. It has been pretty easy to move to final-form ...
theZappr's user avatar
0 votes
1 answer
56 views

Clearing a text field value using a final-form calculator

I am trying to use the final-form calculator to clear a field whenever another field has changed. In my example, I have two fields. Whenever the first field changes, the second field is cleared. This ...
Jackson's user avatar
  • 3,466
0 votes
1 answer
752 views

Trying to clear my react-final-form fields but I got empty object values instead

Here's my scenario, I'm clearing all fields values except for "retainThisObj" the rest clear values on initial page load. My issue is I got empty { } in short my "retainThisObj" ...
devjson's user avatar
  • 113
1 vote
1 answer
945 views

How to add object to react-final-form field name dynamically?

This react-final-form component will return the following result <Field name="answers[0].name" component="input" type="radio" value="0" /> { ...
devjson's user avatar
  • 113
0 votes
0 answers
246 views

Problem in Conditional rendering with react-final-form formState

Here my react code. <Form onSubmit={this.onSubmit} initialValues={formInitialValues} render={({ hasValidationErrors }) => ( <form onSubmit={handleSubmit}> <Field ...
Surya S's user avatar
  • 53
0 votes
1 answer
218 views

Cannot able to import FieldInputProps react-final-form

Trying to set actual propTypes. But show error like this Attempted import error: 'FieldInputProps' is not exported from 'react-final-form'. import { FieldInputProps, FieldMetaState } from 'react-...
Surya S's user avatar
  • 53
1 vote
0 answers
226 views

How to correctly handle PeerDependencies when working with a Components Libraries?

First of all, thank you for reading and trying to understand this question. In my team we have built a library for common Components with React for about 2+ years. This library is built with Babel ...
DeveLope de Vega's user avatar
0 votes
1 answer
1k views

React-final-form - get state into form values

I want to 'plug in' a map location picker into some of my forms to add longitude and latitude into the form values. I created this sandbox to demonstrate the difficulties I'm having. I can get the map ...
Brad Stewart's user avatar
1 vote
1 answer
298 views

How to use useState hook to set value within FormDataConsumer

I am having to set a const value using useState hook in FormDataConsumer. This is necessary because the value of the const can only be gotten within FormDataConsumer. This const value will be used as ...
Olumide Omolayo's user avatar
2 votes
1 answer
1k views

Unable for forwardRef in React Final Form

Using react-final-form i am unable to forwardRef to my TextInput for React Native. The ref is required for handling the Next button in keyboards and other forced-focus events in forms. My setup is as ...
Alex's user avatar
  • 1,953
0 votes
0 answers
172 views

Final form Field with type=checkbox not work with format props

I found that format does not work when we use in the type=checkbox Field. I have this snippet for example <Field name="gender" component="input" type="...
Quoc Van Tang's user avatar
0 votes
1 answer
125 views

Issues with ag-grid and final-form

I'm struggling to create an editable grid with ag-grid. I've found that using both a renderer and editor where both have useField creates problems when removing rows with react-final-form-array. Keep ...
blu's user avatar
  • 372
0 votes
1 answer
894 views

Using final-form-array in a nested object

I have a scenario where I have multiple grids and in each grid can have multiple rows that can be deleted. { document: [{ rows: [{ make: "Tesla" }] } I wanted to do something like <...
blu's user avatar
  • 372
2 votes
0 answers
88 views

Resolving handleSubmit's promise by observing state change

I have augmented Context's dispatch similar to what is described in this blog post. In addition, much like Redux, I can create a middleware chain which all my actions will be run through. Based on ...
Mister Epic's user avatar
  • 16.7k
2 votes
0 answers
78 views

Chrome blocks mouse interaction for autofilled input

I have a simple registration form based on Material UI and React Final Form. Email and password inputs are filled automatically by Chrome autofill if it is possible. The email field has autofocus on ...
arsonist's user avatar
  • 165
0 votes
1 answer
51 views

Is it possible to store numbers in form values?

I am attempting to type a field to a number: <Form onSubmit={onSubmit} initialValues={{ target_type_id: 1 }} render={({ handleSubmit, form, submitting, pristine, values }) => ( ...
Mister Epic's user avatar
  • 16.7k
1 vote
3 answers
974 views

Specify initial value for radio button

I want to the "Exact" radio button to be checked when a form is opened: <Form onSubmit={onSubmit} initialValues={{ match_type: "exact" }} render={({ ...
Mister Epic's user avatar
  • 16.7k
2 votes
0 answers
391 views

How to cancel react-final-form validation after form submission?

When submitting the form that updates existing values I dispatch a redux action creator. <Form onSubmit={onFormSubmit} destroyOnUnregister> {({dirty, invalid, handleSubmit}) => ... &...
nad182's user avatar
  • 21
1 vote
1 answer
1k views

Scroll to error in react-final-form querySelector doesn't work first time?

I need to add scroll to first error in form. I found few solutions: extra package - doesn't work Code from discussion here <FormSpy subscription={{ submitFailed: true }} onChange={() => { ...
angelzzz's user avatar
  • 158