React-redux-form: Formatters versus Parsers missing functionality

[greghawk]

The Problem

I don't wish to save parsed values in state i.e. money like $1,000. I need to store 1000. I don't see a way to add formatted data to the Control from state. Parser property is great for preventing/formatting in the control itself but this also goes back to state this way.

Expected Behavior

A functionality not unlike parser but formatter on the Control component

Actual Behavior

There is parser only unless I am missing something I can't find in docs or repo.

[davidkpiano]

The fragile part of this is this: let's say you entered in $1000 and expected $1,000 to be the view value in a standard <input type="text">.

• The parser needs to always convert 1000 to $1,000
• The parser needs to _also_ know that $1,000 converts to $1,000
• The formatter needs to convert that $1,000 back to 1000 and send it back to the store.

And let's say you press backspace - your parser needs to be smart enough to know that $1,00 should parse to $100 so that your formatter can pick it up again. I can go on but this gets into some tricky logic where, if it's not perfectly in sync, can end up in an infinite loop.

I highly recommend creating a simple custom component for this instead, something like this:

function parseCurrency(value) { /* ... */ }

function formatCurrency(value) { /* ... */ }

const Currency = (props) => (
  <input
    type="text"
    value={formatCurrency(props.value)}
    onChange={e => props.onChange(parseCurrency(e.target.value))}
  />
);

// rendered anywhere:
<Control.text component={Currency} model="invoice.total" />

The great thing about the above example is that it's more explicit and clear than using parse and (a nonexistent) format. But I'm curious to see how a format prop would look like to you - if you can make a compelling case (with good examples), I'd be more than happy to add it in.

[greghawk]

I hear what you’re saying. It does seem to be a common need in form development though. Show one way store another. I will try the custom component wrapper and see how it fares. I’ll think on the format property and get back.

I was thinking the formatter was for controlling how the data looks like in the input and the parser is for storage in the store. It is a little different of a concept of what you are using a parser for.

Angular has a standard way of doing this on its ngModel. See the section for parsers/formatters on this link. https://docs.angularjs.org/api/ng/type/ngModel.NgModelController

From: David Khourshid [mailto:[email protected]]
Sent: Tuesday, April 11, 2017 11:06 PM
To: davidkpiano/react-redux-form [e-mail]
Cc: Hawk, Greg [e-mail]; Author [e-mail]
Subject: Re: [davidkpiano/react-redux-form] Formatters versus Parsers missing functionality (#745)

The fragile part of this is this: let's say you entered in $1000 and expected $1,000 to be the view value in a standard .

• The parser needs to always convert 1000 to $1,000
• The parser needs to also know that $1,000 converts to $1,000
• The formatter needs to convert that $1,000 back to 1000 and send it back to the store.

And let's say you press backspace - your parser needs to be smart enough to know that $1,00 should parse to $100 so that your formatter can pick it up again. I can go on but this gets into some tricky logic where, if it's not perfectly in sync, can end up in an infinite loop.

I highly recommend creating a simple custom component for this instead, something like this:

function parseCurrency(value) { /* ... */ }

function formatCurrency(value) { /* ... */ }

const Currency = (props) => (

type="text"

value={formatCurrency(props.value)}

onChange={e => props.onChange(parseCurrency(e.target.value))}

/>

);

// rendered anywhere:

The great thing about the above example is that it's more explicit and clear than using parse and (a nonexistent) format. But I'm curious to see how a format prop would look like to you - if you can make a compelling case (with good examples), I'd be more than happy to add it in.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHubhttps://github.com/davidkpiano/react-redux-form/issues/745#issuecomment-293459544, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AE2tk90slVwDPgGwCJZhidzbC9O93NlUks5rvD-ngaJpZM4M644c.

[greghawk]

Here is a more clear article if you aren’t familiar with angular’s implementation. https://alexperry.io/angularjs/2014/12/10/parsers-and-formatters-angular.html

From: David Khourshid [mailto:[email protected]]
Sent: Tuesday, April 11, 2017 11:06 PM
To: davidkpiano/react-redux-form [e-mail]
Cc: Hawk, Greg [e-mail]; Author [e-mail]
Subject: Re: [davidkpiano/react-redux-form] Formatters versus Parsers missing functionality (#745)

The fragile part of this is this: let's say you entered in $1000 and expected $1,000 to be the view value in a standard .

• The parser needs to always convert 1000 to $1,000
• The parser needs to also know that $1,000 converts to $1,000
• The formatter needs to convert that $1,000 back to 1000 and send it back to the store.

And let's say you press backspace - your parser needs to be smart enough to know that $1,00 should parse to $100 so that your formatter can pick it up again. I can go on but this gets into some tricky logic where, if it's not perfectly in sync, can end up in an infinite loop.

I highly recommend creating a simple custom component for this instead, something like this:

function parseCurrency(value) { /* ... */ }

function formatCurrency(value) { /* ... */ }

const Currency = (props) => (

type="text"

value={formatCurrency(props.value)}

onChange={e => props.onChange(parseCurrency(e.target.value))}

/>

);

// rendered anywhere:

The great thing about the above example is that it's more explicit and clear than using parse and (a nonexistent) format. But I'm curious to see how a format prop would look like to you - if you can make a compelling case (with good examples), I'd be more than happy to add it in.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHubhttps://github.com/davidkpiano/react-redux-form/issues/745#issuecomment-293459544, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AE2tk90slVwDPgGwCJZhidzbC9O93NlUks5rvD-ngaJpZM4M644c.

[greghawk]

@davidkpiano I am trying the custom component but it doesn't seem to do anything with the model now? I am not quite sure how to use the custom component if I lose all the validators, model-state synch etc with this custom control. Is there a production type example following this pattern?

[davidkpiano]

Can you share the code?

[greghawk]

@davidkpiano I don't have a small example. Can you tell me how the custom control is meant to work? It seems like it loses all the functionality of the standard controls. I'm at a loss as to how to use one.

[davidkpiano]

I'm actually going to implement formatters soon. I realize it's a necessary feature.

[greghawk]

Awesome!!!

From: David Khourshid [mailto:[email protected]]
Sent: Tuesday, May 23, 2017 2:44 PM
To: davidkpiano/react-redux-form [e-mail]
Cc: Hawk, Greg [e-mail]; Author [e-mail]
Subject: Re: [davidkpiano/react-redux-form] Formatters versus Parsers missing functionality (#745)

I'm actually going to implement formatters soon. I realize it's a necessary feature.

—
You are receiving this because you authored the thread.
Reply to this email directly, view it on GitHubhttps://github.com/davidkpiano/react-redux-form/issues/745#issuecomment-303494656, or mute the threadhttps://github.com/notifications/unsubscribe-auth/AE2tkw1NyHt9aIJWRIOSY6Tzdw9Mum3vks5r8yj1gaJpZM4M644c.

[greghawk]

@davidkpiano any movement on the formatters? I am running up against a wall soon.

[davidkpiano]

@greghawk You can use a custom component as a stop-gap. What exactly is blocking you?

[greghawk]

@davidkpiano You're right. Let me try your example of above and see if can get it going. Will that custom control play nice with validations?

[davidkpiano]

Of course! Just add the right hooks to your component to let RRF know when it updates, and keep the view value in your own component's state.

That is, RRF shouldn't care what the view value is. It only should care what the real value is. Even something like react-maskedinput should work, same concept.

[daxiang28]

I was able to hack this together and it seems to work in case it helps anybody prior to 'formatting' being officially released:

import numeral from 'numeral';
import MaskedInput from 'react-text-mask';
import createNumberMask from 'text-mask-addons/dist/createNumberMask';

const numberMask = createNumberMask({
    prefix: '',
    suffix: ''
})
const MyTextInput = (props) => <MaskedInput mask={numberMask} {...props} />;

<Control.text
    autoFocus
    model=".people"
    className="form-control"
    updateOn="blur"
    placeholder="Some text"
    autoComplete="off"
    component={MyTextInput}
    validators={{
        isNumeric: validator.isNumeric,
        required: val => val && val.length,
        minLength: val => val && val.length > 3
    }}
    parser={(val) => { return (val) ? numeral(val).format('0') : val; }}
/>

I think the trick is the parser cleaning it back up for validation.

[brycesenz]

@davidkpiano - any thoughts on the PR? I'll have some time this weekend to work on any revisions you might see fit.

[davidkpiano]

@brycesenz I'll accept it - if developers aren't careful, it can be a footgun, but I'm willing to give the feature a try!