Questions tagged [final-form]
🏁 Framework agnostic, high performance, subscription-based form state management
142
questions
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 ...
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={...
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,...
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 ...
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 ...
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 ...
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> ...
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: { ...
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 ...
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 ...
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 ...
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 ...
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,...
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 ...
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">
...
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://...
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 ...
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?
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 ...
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 ...
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 ...
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 ...
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.
...
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 ...
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 [...
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 ...
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 ...
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 ...
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 ...
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 ...
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 }) => (
<...
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 ...
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 ...
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" ...
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"
/>
{ ...
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
...
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-...
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 ...
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 ...
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 ...
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 ...
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="...
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 ...
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 <...
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 ...
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 ...
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 }) => (
...
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={({ ...
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}) =>
...
&...
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={() => {
...