react-hook-form 自定义验证消息未显示答案

【问题标题】：react-hook-form custom validation message not showingreact-hook-form 自定义验证消息未显示
【发布时间】：2021-10-20 02:03:08
【问题描述】：

我将 react-hook-form 6.8.2 与 React 16.13.1 一起使用，正常验证按预期工作，但在“验证”键内时无效。

const { trigger, formState, watch, reset } = useFormContext({
    mode: 'all',
});

ref={register({
    required: 'This is required',
    minLength: {
        value: 3,
        message: 'Length must be 3 or more',
    },
    validate: {
        always: (value) => value === 1 || 'This should almost always trigger',
    },
    maxLength: {
        value: 5,
        message: 'max 5',
    },
})}

required、minLength 和 maxLength 都可以工作，但 always 不行。

我试过这个： always: (value) => value === 1 || console.log('This should almost always trigger') 在控制台中记录错误

我已经尝试过了：validate: (value) => value === 1 || 'This should almost always trigger' 也没有任何作用

为什么 UI 中没有显示验证消息？

【问题讨论】：

您能否提供一个包含最小可复制示例的代码框以及预期结果应该是什么？

标签： reactjs react-hooks react-hook-form

【解决方案1】：

原来有一个自定义错误呈现类，隐藏在我们自己的输入字段库的深处，没有考虑自定义错误类型。

【讨论】：

【解决方案2】：

在：V7

不要将register 函数的结果传递给引用，只需在输入字段上使用扩展运算符调用注册函数。在此之后，您需要为此输入指定一个唯一名称，就像每个输入一样。在我的示例中，您的配置工作正常。 https://codesandbox.io/s/react-hook-form-js-forked-js0il?file=/src/App.js

将此答案留给正在寻找类似解决方案的人。

【讨论】：

您使用的是 react-hook-form v7 而不是 v6
上面的答案有效，所以我把这个留给寻找V7的人

【解决方案3】：

我使用react-hook-form@6.8.2 和react@16.13.1 还使用RHF 的useFormContext 挂钩根据您的要求制作了一个CodeSandbox。它工作正常，看看：

您的示例代码中有一点不正确：您将useForm config options 传递给useFormContext 挂钩。这不起作用，您必须将它们传递给您的useForm 呼叫。检查 CodeSandbox 以了解如何将 mode 设置为“全部”。

【讨论】：

感谢您的有用回答。多亏了你，我发现真正的错误原来是一个“帮助”类，有人明确检查“正常”错误类型并且不考虑自定义错误类型，这就是它从未呈现我的错误的原因。跨度>
太好了，很高兴我能帮上忙！

【解决方案4】：

验证功能检查您的情况。如果它返回 false，则可以使用如下错误机制显示消息：

import React from "react";
import { useForm } from "react-hook-form";

const Example = () => {
  const { handleSubmit, register, errors } = useForm();
  const onSubmit = values => console.log(values);

  return (
    <form onSubmit={handleSubmit(onSubmit)}>
  
      <input
        {...register("username", {
          validate: value => value !== "admin" || "Nice try!"
        })}
      />
      {errors.username && errors.username.message} //Here we display the error

      <button type="submit">Submit</button>
    </form>
  );
};

【讨论】：

我不明白为什么你的例子是假的，我的例子是真的，他们都是返回字符串，不是吗？
抱歉我的错误，我正在编辑。关键是你必须使用错误对象
我正在使用它，它适用于所有正常的验证。还是我误会了你？