Comments (12)
Like this?
from react-final-form.
@erikras Perfect!!! ill refer it when I get to doing it. Thanks !
from react-final-form.
@erikras Not really, I am able to do that. Basically same way in Field array there are buttons to add/remove customers. Same way in this without an array.
In the example you have, You have
<div>
<label>{label} City</label>
<Field
name={`${name}.city`}
component="input"
placeholder={`${label} City`}
/>
</div>
Where the city
keyword is in your code and user enters just the value in text box, I want to user to even provide city
keyword as a value for text box, i.e. in your example there is 1 text box, for value, I want to have 2 test box.
So user click (+) button, gets 2 text box and inserts city
, San Francisco
in them.
So the json will look
{
"billing" : {
"city": "San Francisco"
}
}
But if the user entered town
, San Francisco
in the 2 text box fields.
{
"billing" : {
"town": "San Francisco"
}
}
from react-final-form.
You want the user to enter both the key and the value?
That might require your own state management solution. Either that or using arrays of {key:string, value:string}
.
from react-final-form.
@erikras Yes both key and value. Maybe can use array, But maybe on submit i change structure from array to object ?
from react-final-form.
But maybe on submit i change structure from array to object ?
👍
from react-final-form.
@erikras Thanks will go down that route then. Was trying to create something like a JSON editor where user can update/add/remove JSON objects or arrays. Will do some hack for objects, Arrays work just fine.
from react-final-form.
@erikras If I need to Load and initialize the data in array forms, Do I need to do anything special ? Also are there any api's in final-form I can use for transformation of data while loading or when submitting ?
from react-final-form.
No, just provide the initialValues
as an object with an array inside it. At the moment, for FieldArray
to work, you must provide a named key. i.e. you can't have initialValues: [ {key, value}, {key, value} ]
, you must do initialValues: { myValues: [ {key, value}, {key, value} ] }
. Make sense?
from react-final-form.
@erikras, kind of makes sense, But im sure as final-form gains audience, A real example working example to refer from Readme will help everyone a lot 👍 (if you can put that up would be helpful, but I will attempt it soon too, based on your comment ) ..Thanks for great work.. I am impressed with ease of use of Final form.
from react-final-form.
It's not that complicated. (if I'm understanding your question) Here:
from react-final-form.
This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.
from react-final-form.
Related Issues (20)
- Field State Sync Issue in Strict vs Non-Strict Mode in react-18 HOT 5
- Q: should readonly fields be validated on blur?
- Error in codesandbox example HOT 2
- Documentation for defaultValue of FieldProps is not matching implementation
- Warning message in console when using the field validation for a string field. HOT 3
- Ran into "is dirty" validation issues when state was used to autofill a form's input field. HOT 1
- [Feature Request] Add new prop to specify changes to specific form fields HOT 1
- change is not a function HOT 1
- Rewrite To Typescript HOT 2
- rerenderOnEveryChange for react-final-form
- <FormSpy> components rendering earlier than in previous versions
- DestroyOnUnregister incompatible with StrictMode in React18 HOT 2
- isEqual is initialized by the first field registered instance
- useField does not rerender component, when its props change
- Submitting Images in React Final Form
- I believe defaultValue should be the DEFAULT. That means, if NO initialValue was passed in, the defaultValue would be used. If there is an initialValue, it should override the defaultValue. One work around is using an OR in initialValues and skip using defaultValue all together like so:
- Form not dirty after removing items from FieldArray using final-form-arrays
- Field-Level validation for root and nested fields
- The field errors are still there, but the form errors are gone
- [Question] Is it safe to use noValidate flag on form and to prevent default native validation messages
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from react-final-form.