TextInput component parser | Mantine | Page 1

echo dragon Nov 6, 2023, 8:52 PM

#

iirc there was a feature for this on the numberinput component.
https://github.com/mantinedev/mantine/issues/763
What would this be for the textinput?
I get an error when I try to use either formatter or parser insise of my component: tsx <TextInput withAsterisk classNames={classes} placeholder={placeholder} label={label} {...form.getInputProps(name)} />

GitHub

[Feature Request] number input formatting · Issue #763 · mantinedev...

Usage example, including component/hook API Similar to the decimal separator, would be great to have a format for the number. This is helpful for inputs that are for currency, percentages, etc. Pos...

#

just tried this ts validate: { id_number: (value)=> value.toUpperCase(), }, also didnt work

echo dragon Nov 6, 2023, 9:22 PM

#

feel free to ping me

echo dragon Nov 6, 2023, 9:53 PM

#

i managed to do it onsubmit with this:
https://mantine.dev/form/values/#transformvalues

Form values | Mantine

Manipulate form values with use-form

#

const form = useForm({
    initialValues: {
      first_name: "",
      last_name: "",
      phone_number: "",
      id_number: "",
      termsOfService: false,
    },

    validate: {
      first_name: isNotEmpty("Voornaam mag niet leeg zijn"),
      last_name: isNotEmpty("Achternaam mag niet leeg zijn"),
      phone_number: isNotEmpty("Telefoonnummer mag niet leeg zijn"),
      id_number: isNotEmpty("Id nummer mag niet leeg zijn"),
    },
    transformValues: (values) => ({
      ...values,
      id_number: values.id_number.toUpperCase(),
    }),
  });```

#

bit what I actually want is to transform the value not on submit but onChange.

#

How do I do that?

#TextInput component parser