react-hook-form 是的解析器，reactStrap 问题解决来自子组件的错​​误

如何解决react-hook-form 是的解析器，reactStrap 问题解决来自子组件的错​​误

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

• 如果表单中的输入是 DIRECTLY，则正确返回验证错误
• 未能返回验证错误输入位于子组件内。

反应钩形 ^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()}
    />
)

解决方法

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

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