Framework agnostic, high performance, subscription-based form state management
Questions tagged [final-form]
142 questions
41
votes
4 answers
How to set/change Field value from external user action React Final Form
There are many situations in which we might want to set the value of a specific field within a form to help out the user.
For example, an online fruit store may ask users how many apples they want to buy. To help users out, we could have 3 buttons…
aryzing
- 4,982
- 7
- 39
- 42
22
votes
1 answer
with react final-form why is meta.touched always false with third party components?
using final-form, i have a third party input component. i've written an adapter for it. it has a validator as well, but meta.touched is always false. i've tried propagating the onFocus event up to the input, but no luck. what am i doing wrong?
const…
Adam Krawesky
- 1,313
- 11
- 23
9
votes
3 answers
React-Final-Form: Set initialValues from props, form state resets on props change
I have a component, that takes a balance prop, and this balance prop can change over time.
I then have a React Final Form to send a transaction, with usual fields amount to send, receiver... And in my validate, I just check that the user has enough…
jeanpaul62
- 9,451
- 13
- 54
- 94
7
votes
1 answer
How do I use multiple submit buttons with react-final-form?
I want to build a form using react-final-form that has multiple submit buttons, where each submit button sets a different value in the form. Essentially, I want to create a form that looks something like this in rendered HTML:
singingwolfboy
- 5,336
- 3
- 27
- 32
5
votes
0 answers
react-native: final-form focus next field
I cant focus my next field with final-form and react-native and functional components. There is like 0 documentation on this case.
…
rendom
- 3,417
- 6
- 38
- 49
5
votes
5 answers
How to rerun validation on submit in React Final Form
Once a form's fields have been validated, submitting doesn't trigger a rerun of the validation. Is there a way I can trigger a rerun of the validation when the form is submitted?
I have a form field whose value can become invalid if it's not…
Uche Ozoemena
- 816
- 2
- 10
- 25
5
votes
2 answers
React Final Form. How to set field value from component state
I'm trying to add a date picker to my forum.
Problem is the date picker only works through the component state.
meaning that the picked values go into the state.
I'm trying to force a final form field to use that state value.
But I can't seem to…
jdstrong95
- 63
- 1
- 1
- 5
5
votes
1 answer
How to make autofocus on input field when using react-final-form?
I created a form using react-final-form. autofocus is not working. The only solution I know is to use ref feature of React. Can I autofocus the input using react-final-form library?
import React from "react";
import { render } from…
Leon Gilyadov
- 670
- 6
- 13
5
votes
1 answer
Performance trouble with FieldArray in react-final-form
I make an application where I use FieldArray component from react-final-form. I have performance troubles with my components of Array. Each component also contains for about 8 Fields (each of them contain validation rule) (from react-final-form too)…
Дмитрий Богданов
- 67
- 7
4
votes
2 answers
How do I manage state outside of React Final Form?
I want to store the state of my React Final Form somewhere. Right now that is in a React Hook. I'm currently using useMethods, similar to useState.
The form I currently have is part of a multi-step process, and when I navigate to another page which…
Anders Stensaas
- 749
- 5
- 18
4
votes
1 answer
props.mutators is deprecated
My code is working, but I got a warning :
Warning: As of React Final Form v3.3.0, props.mutators is deprecated
and will be removed in the next major version of React Final Form.
Use: props.form.mutators instead. Check your ReactFinalForm…
Xero
- 3,951
- 4
- 41
- 73
3
votes
1 answer
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 add seconds for preparation_time so the format…
Ati
- 304
- 3
- 14
3
votes
0 answers
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
3
votes
2 answers
Cannot find alert by accessible name
I am writing a test to satisfy the following business rule:
If we select Canada from the country dropdown, show error messages on blur for the province and postal code fields if they are blank.
My React Final Form under test is: