Value mapping

[mbretter]

Hi,

is there any possibility to map the value before it will be set into the input component?

Some api returns boolean values as integer 0/1, when setting these values into a checkbox, it will not work, because integers are not a valid value for the checked property.

The other use case would be implicitly converting undefined/null into an empty string for TextBoxes.

Using the onChange event of the controller, the value could be converted back, but how can this be done the other way?

Here's a code snippet (MUI checkbox)

    const {control, errors} = useFormContext()

   return <FormControl fullWidth={fullWidth} error={error}>
        <Controller control={control}
                    name={name}
                    onChange={([, v]) => {
                        return v ? 1 : 0
                    }}
                    as={<FormControlLabel
                        label={label}
                        control={<Checkbox color="primary" {...checkboxProps}/>}
                    />}
                    defaultValue={false}
        />
        <FormHelperText>{helperText}</FormHelperText>
    </FormControl>

thx, cheers

[bluebill1049]

i think you will have to build a wrapper around MUI checkbox then, which will accept 1 and 0 as true and false.

[bluebill1049]

Valid points above, is there a chance to build a generic wrapper for those value mapping?

[bluebill1049]

feel free to suggest: if you have any purposed API or idea?

[mbretter]

maybe by using callbacks, the MUI wrapped component:

const FormField = ({as, mapValue, ...rest}) => {
    const {control} = useFormContext()

    return <Controller 
                       control={control}
                       mapValue={mapValue)
                       as={as || MUITextField}
                       {...rest}
    />
}
FormField.propTypes = {
    mapValue: PropTypes.func,
    as: PropTypes.element
}

usage in the form:

<FormField name="name" label="Name" required fullWidth mapValue={v => v === undefined ? '' : v}/>

[bluebill1049]

probably shouldn't be at the controller level.

[mbretter]

hmm, without knowing the internals of rhf, I could imagine to pass an additional geter option to useForm, by passing name/value and also the ref to the field, to be able to write generic mappings for certain types of input elements.

    const methods = useForm({
        defaultValues: data,
        getValue: (name, value, fieldRef) => {
            if (value === undefined || value === null) return '' // map undefined/null to empty string
            if (name === 'status') return value === 'active' // map a silly status field value to bool

            return value
        }
    })

[dandv]

@mbretter: sounds just like my earlier question about transforming the value returned by a controller.