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

【问题标题】：react-hook-form yup resolver, reactStrap problem resolving error from child componentreact-hook-form yup 解析器，reactStrap 解决子组件错误的问题
【发布时间】：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")
是的，在去吃午饭之前看到的。添加为答案而不是评论，我会将其标记为正确答案。

标签： reactjs yup react-hook-form reactstrap

【解决方案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"),
});

【讨论】：