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

Question

我有一个包含我的输入组件的辅助组件的表单。

正确地 return 如果输入直接在表单中，则会出现验证错误
未能return验证错误输入在子组件内。

react-hook-form ^6.9.2

yup ^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()}
    />
)

Answer 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"),
});

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

react-hook-form yup resolver, reactStrap problem resolving error from child component

reactjs

reactstrap

yup

react-hook-form

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

react-hook-form yup resolver, reactStrap problem resolving error from child component

reactjs

reactstrap

yup

react-hook-form

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