Subscription-based form state management for React
Questions tagged [react-final-form]
482 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
15
votes
5 answers
How to listen to onChange of the Field component in React-Final-Form?
Redux-form "Field" component provides onChange property. A callback that will be called whenever an onChange event is fired from the underlying input. This callback allows to get "newValue" and "previousValue" for the Field.
React-final-form "Field"…
Maksim Boltik
- 321
- 1
- 2
- 6
13
votes
1 answer
Using lodash debounce to return a promise
Using React, react-final-form, and the lodash debounce function I would like to validate that a username has not already been used (the field is using react-final-form).
I'm having problems getting the debounce function to return a resolved promise…
user2190690
- 1,744
- 4
- 24
- 31
9
votes
1 answer
Validating a react-final-form form with yup and custom validations
I have a form created with react-final-form and a validation function that looks like this
export const validate = async (values, schema) => {
if (typeof schema === 'function')
schema = schema();
try {
await schema.validate(values, {…
xunux
- 1,531
- 5
- 20
- 33
9
votes
1 answer
Simple way to update form values depending on changes with react-final-form
I'm trying to implement a form with two consecutive dependent Select with react-final-form and material-ui
Requirements
Both fields are required
When user selects a country value
city field should reset to blank
city field should not be marked as…
Ricovitch
- 2,278
- 1
- 21
- 28
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
2 answers
Use server-side validation response in react-admin
In my app using react-admin I have a few forms where the validation must be performed on the server side. My API (implemented with api-platform) returns a 400 response with a key in its body that contains an array of the constraint violations, keyed…
Rad80
- 823
- 7
- 17
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
6
votes
2 answers
How to validate each form step in material ui stepper?
Typical material-ui stepper below.
export default function HorizontalLinearStepper() {
const classes = useStyles();
const [activeStep, setActiveStep] = React.useState(0);
const [skipped, setSkipped] = React.useState(new Set());
…
wantToBeAProgrammer
- 149
- 4
- 13
6
votes
2 answers
Does [React Final Form] work with Material-UI 3.x?
I want to use a TextField from Material-UI with react-final-form (https://github.com/final-form/react-final-form).
The main question is "How to get values object?"
I cannot get it from TextField.
The result is:
I've already tried different examples…
Julia
- 674
- 1
- 6
- 18
5
votes
3 answers
Clear a field's value on input clear in react-final-form
I'm using a custom component with react-final-form. On input change it sets the value to the address field. But when the input is cleared it doesn't update the value of the field. So I'm trying to do it with form mutators.
I have already added a…
jupiteror
- 1,085
- 3
- 24
- 50
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