react-hook-form yup 解析器，reactStrap 解决子组件错误的问题

Posted 2023-03-23

【中文标题】react-hook-form yup 解析器，reactStrap 解决子组件错误的问题

【英文标题】：react-hook-form yup resolver, reactStrap problem resolving error from child component

【发布时间】：2021-10-04 08:49:15

【问题描述】：

我有一个带有辅助组件的表单，其中包含我的 Input 组件。

如果输入直接在表单中，则正确返回验证错误 未能返回验证错误 Input is inside a Child Component.

react-hook-form ^6.9.2

是的 ^0.32.8

yupResolver @hookform/resolvers ^0.1.1

"reactstrap": "^8.7.1",

// only receive validation message for subject.
// but submission returns ALL the fields and values correctly..

 const schema = yup.object().shape(
    subject: yup.string().required('Please provide a subject'),
    AccountTitleLine1: yup.string("Account Title is Required"),
  );
<Form onSubmit=handleSubmit(onSubmit)>

//this works
    <Input
        type="subject"
        name="subject"
        id="subject"
        defaultValue='item.subject'
        innerRef=register()
    />

//but this doesn't: 
  <Field 
    name="AccountTitleLine1" 
    label='Account Title Line1' 
    text=item.AccountTitleLine1   
    register=register 
    readOnly=readOnly 
    labelLeft 
  />
</Form>


//Field Component:
export const FieldOldNew = (props) => 
    const name = props.name; // props.name.match(/[^\.]+$)/);
    const type = props.type || 'input';
    const text = props.text;
    const register = props.register;

...

return (
    <Input
        name=name
        type=type
        defaultValue=text
        innerRef=register()
    />
)

【问题讨论】：

您在AccountTitleLine1 上缺少required 方法调用，就像您在subject 上所做的那样。应该是AccountTitleLine1: yup.string().required("Account Title is Required")

是的，在去吃午饭之前看到的。添加为答案而不是评论，我会将其标记为正确答案。

【参考方案1】：

您缺少对 AccountTitleLine1 的 required 方法调用，就像您在 yup 架构中对 subject 所做的那样。

const schema = yup.object().shape(
  subject: yup.string().required('Please provide a subject'),
  AccountTitleLine1: yup.string().required("Account Title is Required"),
);