Javascript 反应窗体钩子如何验证选择选项

我正在使用reach钩子，为了验证我的表单字段，我正在使用

react hook form

，因为这是目前最好的选择

所以，为了验证我的正常输入字段，我只做了

ref={register（{required:true}）}

然后在提交时检查错误，因为我从react钩子表单导入错误

但当我对select字段执行相同操作时，它并没有检查错误对象

这就是我正在做的

<label htmlFor="func" className="form_label">
      Select function
    </label>
    <select name="func" ref={register({ required: true })}>
      <option selected disabled>
        Select function
      </option>
      <option value="5">Function 2</option>
      <option value="6">Function 3</option>
    </select>
    {errors.func && (
      <div>
        <span>Function is required</span>
      </div>
    )}

选择函数
选择函数
职能2
职能3
{errors.func&&(
功能是必需的
)}

我不知道我错过了什么

我的实际代码使用的是动态数据

所以我是这样循环的

<Form.Control as="select" custom>
                    <option disabled selected>Select role</option>
                    {loading === false &&
                    data.get_roles.map((li) => (
                    <option value={li.user_type_id}> 
                    {li.user_type}</option>
        ))}
            </Form.Control>

选择角色
{加载===false&&
data.get_roles.map（（li）=>(
{li.user_type}
))}

---

试试这段代码。我试过了，效果很好：

<label htmlFor="func" className="form_label">
  Select function
</label>
<select name="func" 
  ref={register({
     required: "select one option"
  })}>
  <option value=""></option>
  <option value="5">Function 2</option>
  <option value="6">Function 3</option>
</select>
{errors.func && <p style={{color:'red'}}> {errors.func.message}</p> }

选择函数
职能2
职能3
{errors.func&
{errors.func.message}
}

我想你缺少了一个默认值为空的select=”“@比尔我已经尝试了所有的方法你能帮我一些代码吗看一下这个CSB：它不起作用了，你能分享代码吗？sandboxI希望这对你有帮助