React-final-form: Add support to value lifecycle

Created on 8 Dec 2017 · 5Comments · Source: final-form/react-final-form

The value lifecycle is one of the best features from redux-form. Will react-final-form support something like that?

Source

gsantiago

👍3

Most helpful comment

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 :smile:). I would probably solve this problem by creating a custom component and pass it to the Field.

gsantiago on 11 Dec 2017

👍8

All 5 comments

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?

erikras on 8 Dec 2017

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.

gsantiago on 11 Dec 2017

👍8

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.