帶有 react-select formState 的 React-hook-form 無效但 controller 沒有給出錯誤

Question

我使用 react-hook-form 進行驗證。 如果 formState.isValid 為 false，則禁用提交按鈕。 如果我不 select 選項 formState.isValid 返回 false，它就可以工作。 但是 controller 沒有給出錯誤。 我怎樣才能讓它給出錯誤消息？ 這是 controller 代碼

const { register, errors, formState, control } = useForm({
        mode: "all"
    });

function changeValue(inputValue) {
        onChange({ key: "expiryMonth", value: inputValue.value });
    }
...

{errors.expiryMonth && <span className="input__error-message">required.</span>}
                <Controller
                    name="expiryMonth"
                    defaultValue={null}
                    control={control}
                    value={expiryMonth}
                    render={({ onChange }) => <Select isSearchable={false} placeholder="Month" onChange={(inputValue) =>
                        onChange({ value: changeValue(inputValue) })} options={months} />}
                    rules={{ required: true }}
                    register={register}
                />

Answer 1

當您使用Controller時，它會為您register ：

<Controller
  render={(props) => 
    <ReactSelect {...props} 
      options={[
        { value: "chocolate", label: "Chocolate" },
        { value: "strawberry", label: "Strawberry" },
        { value: "vanilla", label: "Vanilla" }
    ]} 
  />}
  name="ReactSelect"
  control={control}
/>