Ability to transform value

[GProst]

Is there a way to apply value transformations on cnange event?
For example, I'd like to trim() some field values and if it's a credit card field I want to add white spaces after each 4th digit

[GProst]

Should have checked examples first, I forgot that setting onChange without value doesn't make an input controllable

[GProst]

On the second thought, can we really guarantee that onChange handler is called before the listener that is set by react-hook-from so that validations are run after the applied transformations?

Probably would be better if there was some transformValue property which we could pass to register

[bluebill1049]

very good point, I will spend figure out a good solution to this. Yea place inside register maybe a good idea.

[bluebill1049]

actually, we have this code in production. but I can look into the validation order.

<input
  name="customerEstimatedValue"
  onChange={e => {
    const value = e.target.value;
    const valueInNumber = convertStringToNumber(value);
    e.target.value = `$${valueInNumber.toLocaleString('en-IN')}`;
  }}
  ref={
    register({
      required: true,
      validate={{
        maxPropertyValue: value => convertStringToNumber(value) <= MAX_PROPERTY_VALUE,
        minPropertyValue: value => convertStringToNumber(value) > MIN_PROPERTY_VALUE,
      }}
   })
  }
/>

[GProst]

Hmm, indeed!
But I think this is nice if there is just one validation function otherwise the same transformation will be executed for each validation function + there is a code duplication

[bluebill1049]

Yea true that

[bluebill1049]

in terms of one validation function, we are actually only have one.

import validatePropertyValue from './logic/validatePropertyValue';

ref={
  register({
  required: true,
  validate={validatePropertyValue}
})

I guess the only problem is here

onChange={e => {
    const value = e.target.value;
    const valueInNumber = convertStringToNumber(value);
    e.target.value = `$${valueInNumber.toLocaleString('en-IN')}`;
}}

but you can covert this into a funciton too

function maskValueInput() {
    const value = e.target.value;
    const valueInNumber = convertStringToNumber(value);
    e.target.value = `$${valueInNumber.toLocaleString('en-IN')}`;
}

onChange={maskValueInput}

or have a transform function in register.

one concern is that I am expanding the API, which you can achieve with normal Javascript. let me think about it 🤔

[GProst]

This is not something critical that I personally need, transforming value inside validate works for me 👍. Just feels like having something like transform in register would be convenient

[bluebill1049]

No worries I will park this for now then :) thanks

[cybervaldez]

I'm on the same boat, it's been a year now so can someone point me if there's now a solution for transforming values after an input change but before a validation is triggered?

[bluebill1049]

the lib itself is not 1 year old :)

alternative: you can custom register a field,

useEffect(() => {
  register('test');
}, register);

<input onChange={e => {
  setValue('test', unTransform(e.target.value), true); // do you unTransform.
  e.target.value = 'xxx' // do you transform here;
}} />