Effect CommunityEC
Effect Community•2y ago•
2 replies
Titouan Créac'h

Issue with Schema.Option(Schema.String) and react-hook-form

Hello 👋 I've a weird behavior when trying to use Schema.Option(Schema.String) when using react-hook-form (effect resolver)


// Schema definition
export const formSchema = Schema.Struct({
  content: Schema.String.pipe(
    Schema.nonEmpty({ message: () => "Required" }),
  ),

  selectedDocumentId: Schema.Option(Schema.String),
});

// form creation
const form = useForm<Schema.Schema.Type<typeof formSchema>>({
  resolver: effectTsResolver(formSchema),
  defaultValues: {
    content: "",
    selectedDocumentId: Option.none(), // typescript works here 👍
  },
});

// later in a <Select /> component

<Select
  onValueChange={(x) => {
    field.onChange(Option.some(x));
  }}
  defaultValue={Option.getOrUndefined(field.value)}
>
  {/* blablabla *}
</Select>


At this point everything is OK (typescript types matches) and when I do form.getValues(), selectedFile looks great: { _tag: "Some", ...}
The problem is when I submit the form.
Validation fails with message: _tag : {message: 'is missing', type: 'Missing', ref: undefined}

I don't know really what is missing and more generally how I can use Option instead of T | undefined in a form with use-hook-form an effect ?
Was this page helpful?