Is it possible to change the validation rules after initializing the field throught useField?

[AlexeyEsin]

Dependencies check up

• I have verified that I use latest version of all @mantine/* packages

What version of @mantine/* packages do you have in package.json?

7.16.3

What package has an issue?

@mantine/form

What framework do you use?

Vite

In which browsers you can reproduce the issue?

Chrome

Describe the bug

I'm trying to change the validation rule depending on the component's props. Is there any way to do this?

Here is a sample code:

import { TextInput } from '@mantine/core';
import { useField } from '@mantine/form';
import { FC } from 'react';

interface CustomInputProps {
  regex?: string;
  initialValue?: string;
  onChange: (value: string) => void;
}

export const CustomInput: FC<CustomInputProps> = ({ regex, initialValue, onChange }) => {
  const field = useField<string>({
    initialValue: initialValue ?? '',
    validateOnChange: true,
    validate: (value: string) => (regex && !new RegExp(regex).test(value) ? 'error' : null),
    onValueChange: onChange,
  });

  return (
      <TextInput {...field.getInputProps()} placeholder={regex} />
  );
};

After changing the regex in props, the validation rule does not change. I tried to store the validation rule in the useCallback, but it didn't help.

If possible, include a link to a codesandbox with a minimal reproduction

https://codesandbox.io/p/sandbox/mantine-react-template-forked-nyps4g

Possible fix

No response

Self-service

• I would be willing to implement a fix for this issue

[AlexeyEsin]

I found an acceptable solution without using the useField.

import { TextInput } from '@mantine/core';
import { ChangeEvent, FC } from 'react';

interface CustomInputProps {
  regex?: string;
  value: string;
  onChange: (value: string) => void;
}

export const CustomInput: FC<CustomInputProps> = ({ regex, value, onChange }) => {
  const handleChange = (e: ChangeEvent<HTMLInputElement>) => {
    onChange(e.target.value);
  };

  return (
    <TextInput
      placeholder={regex}
      onChange={handleChange}
      error={regex && !new RegExp(regex).test(value) ? 'error' : null}
    />
  );
};

But the question remains open. In addition, most likely, the same problem is present when using useForm.

[rtivital]

You can use any validation logic:

validate: condition ? function1 : function2

or

validate: value => condition ? validation1(value) : validation2(value)