How to set array in useForm and validate the length of value?

Question

I'm using react-hook-form.
What I wanna do is to push a value to an array and validate the length of value.
This is defaultValue.

    defaultValues: {
      title: '',
      role: '',
      language: {source: '', target: []},
      industry: '',
      due_at: '',
      content: '',
    },

and this is input field that handles language.target.

<Controller
    name="language.target"
    control={control}
    rules={{
    required: true,
    setValues: (v) => setValue([...getValues('language.target'), v.value]),
    validate: (value) => {
    return '';
     },
      }}
    render={({field: {onChange}}) => (
       <Select
           options={languageIndex}
           onChange={(value) => onChange(value.value)}
           value={languageIndex.filter(
           (item) => item.value === getValues('language.target')
              )}
           placeholder="Select"
           />
       )}
 />

I tried this way to push a value like below and they didn't work..

setValues: (v) => setValue([...getValues('language.target'), v.value]),
setValues: (v) => [...getValues('language.target'), v.value],

also I have no idea how to validate the length of array.
If language.target.length is greater then 3,
I want to make it stop to set value.
If there's any good idea, please share with me! Thanks.

Instead of pushing a value, use `append` from `useFieldArray`. Here is a helpful example for the whole thing: https://codesandbox.io/s/infallible-bush-c92l0?file=/src/App.tsx (it does not include the validation part though) — denise, Mar 09 '22 at 01:55
For validation, this might be useful https://stackoverflow.com/a/71406779/5962587 — denise, Mar 09 '22 at 09:08

score 0 · Answer 1 · answered Aug 05 '23 at 13:35

use useFormContext() not useForm() for getValues and setValue: import { useFormContext } from 'react-hook-form';
const { getValues, reset, watch, control, setValue } = useFormContext()

2)Now you can use append from useFieldArray and display the default values :

const { fields, append, prepend, remove, swap, move, insert, replace } = useFieldArray({
    control,
    name: `creation`,
  });
append({
      title: '',
      role: '',
      language: {source: '', target: []},
      industry: '',
      due_at: '',
      content: '',
    })

finaly, you can just name for controler , it changed automatiqualy :

<Controller
    name={`creation[${index}].language`}
    control={control}
   ......
 />

How to set array in useForm and validate the length of value?

1 Answers1