errors not updated in fields

[jamalsoueidan]

I'm still trying to go my head around the package, it seems a little bit confusing from other validation package, even though their is few methods to use.

The error for productId is not getting populated.

const [productId, setProductId] = useState<string | null>('');

const [form, fields] = useForm({
    lastSubmission,
    defaultValue: defaultValues,
    onValidate({formData}) {
      console.log(
        formData.get('productId'),
        parse(formData, {
                // prints out error
                // productId: ['Required']
          schema,
        }),
      );
      return parse(formData, {
        schema,
      });
    },
  });
  
console.log(fields.productId.error);  // error: undefined??????? it should be 'Required'

<Form method="post" {...form.props}>
        <Stack>
          <Select
            label="Hvilken ydelse vil du tilbyde?"
            placeholder="Vælg ydelse"
            name={fields.productId.name}
            error={fields.productId.error}
            data={selectServices}
            onChange={setProductId}
            value={productId}
          />
          

I need to listen on the change of the select, since i need to use the value, and conform.input doesn't throw any re-render on the react component.

[courdek]

You can still use conform.input while using onChange and value. It doesn't add those props.

Check to see what type of input the Select component is using internally. I just ran into a similar problem and it was because my Select component was using an <input type="hidden" /> to ensure the value was submitted in the form. Instead of using type hidden, use CSS to hide it. Then use conform.input passing in options object with hidden: true.

<Select
    {...conform.input(field.productId, { hidden: true }) }
    label="Hvilken ydelse vil du tilbyde?"
    placeholder="Vælg ydelse"
    error={fields.productId.error}
    data={selectServices}
    onChange={setProductId}
    value={productId}
/>