Hi,
I use inside my app a Form with Field and TextField. It works all very nice, but if I add the validate the problems comes.
I find out in the case I overwrite from the fieldProps the onCahnge the validate function from the Field not throw an error.
I use mobX as state manger for my TextField and I need a custom onChange Methode. hoe it is possible to validate a value and have a store?
Here my code
<Field
aria-required
name="title"
label="Name of the Field"
isRequired
defaultValue={store.item.title}
validate={(value) => (value && value.length < 8 ? 'TOO_SHORT' : undefined)}
>
{({ fieldProps, error, valid }) => (
<div>
<TextField
{...fieldProps}
testId="field-text-field-title"
onChange={(e: React.ChangeEvent<HTMLInputElement>) => {
store.updateProperty(e.currentTarget.name, e.currentTarget.value);
}}
/>
{!error && !valid && (
<HelperMessage>
Should be more than 4 characters
</HelperMessage>
)}
{!error && valid && (
<ValidMessage>
Nice one, this username is available
</ValidMessage>
)}
{error === 'TOO_SHORT' && (
<ErrorMessage>
Invalid username, needs to be more than 4 characters
</ErrorMessage>
)}
{error === 'IN_USE' && (
<ErrorMessage>
Username already taken, try another one
</ErrorMessage>
)}
</div>
)}
</Field>
Thank you for the help
@nhac.tat.nguyen can you help?