Comments (5)
Indeed, I could format, parse and normalize the values before and after the form submission. But then I would lose the capability to use the combination between format and normalize to create masks for input.
With redux-form, I can do things like this:
<Field
name='phone'
component='input'
type='tel'
format={value => mask(value, '(99) 9999-9999')} /* mask the input for the user */
normalize={value => value.replace(/\D/g, '')} /* internally, store only the numbers to send to server later */
validate={value => !validatePhone(value) && 'Invalid phone'}
/>
That's it. I don't have to depend on more heavy libraries like react-text-mask just to mask the inputs.
The other reason is that I like to keep validation and value lifecycle logic in the Field component itself. If I change the Field name, update some logic in the lifecycle or remove it, then I would just change the Field component and not change objects or functions in different parts of my code.
I understand if you want to keep the react-final-form simple and not include these features (I like the idea of keeping the react-final-form simple 😄). I would probably solve this problem by creating a custom component and pass it to the Field.
from react-final-form.
I agree with @gsantiago, the value lifecycle was a really simple and nice way to separate the data from the display. I think that there are quite a lot of cases where the value stored in the form state and the value passed to the "dumb" component need to be handled differently.
from react-final-form.
Published fix in v2.1.0
.
from react-final-form.
Hmm... I was hoping to not need to implement that, instead laying the burden of formatting and parsing on the code that initializes and submits the form. Can you make an argument for why you think you need it?
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)
- Feature request: new render prop `handleSubmitSync`
- Error messages on nested object values HOT 1
- Form Reset When Modal Close HOT 1
- 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
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.