How to custom trigger of onChange of register()

[Noitidart]

Hi there,

I have to custom trigger onChange returned by register (as I need it to run the deps, cant use useController as re-renders too), so did this:

function setValueAs(value) {
  console.log('in setValueAs')
  return value;
}

function isPositive(value) {
  if (value && Number(value) > 0) {
    return null;
  } else {
    return 'This is not positive';
  }
}

const CONFIG = {
  required: 'This is required',
  setValueAs,
  validate: { isPositive } 
}

function TextField(props) {
  const form = useFormContext();
  const field = form.register('foo', CONFIG);
 
  return (
    <input
      onChange={e => {

        props.onChange(e);

        field.onChange({
          type: 'change',
          target: {
            name: field.name,
            value: e.target.value
          }
        })

        // myOtherField.onChange({
        //   type: 'change',
        //   target: {
        //     name: myOtherField.name,
        //     value: e.target.value
        //   }
        // })
      }}
    /> 
}

This works except that it does not call the setValueAs. Any ideas on how to make the setValueAs trigger?

[bluebill1049]

can you share a codesandobx?

[Noitidart]

Thanks very much! Here is a sandbox - https://codesandbox.io/s/custom-onchange-not-trigger-setvalueas-ou7zmr?file=/src/App.js:686-779

I commented out <InputGood>. So when you type you will see that setValueAs does not trigger.
If you then comment out <InputBad> and uncomment <InputGood> you will see setValueAs does trigger.

Side note: Is it documented anywhere how to custom trigger onChagne, onBlur? Its useful for react-native. But I only found by looking at code that I have to pass in an object with type: 'change' and target: { name: string, value: string }.

[leapful]

@Noitidart :

You forgot to pass "field" data of "form.register" into input element.

Working demo: https://codesandbox.io/s/custom-onchange-not-trigger-setvalueas-forked-nj0z8y?file=/src/App.js

[Noitidart]

Thanks @leapful - I actually intentionally omitted this because two reasons:

• On react-native, we can't pass the "name" or "ref". And useController works by re-render. But with register, I can use form.watch((values, { name }) => name === field.name ? nativeRef.setNativeProps({ text: }) : null)
• Then on web, I have a situation where one field controls multiple values. For instance typing into text input "X" will set double the value field "Y" and field "Z".

Is it possible to do this without passing the rest of the details of form.register?