react-hook-form解析器,reactStrap问题从子组件解决错误



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

  • 如果输入直接在
  • 表单中,则正确返回验证错误
  • 返回验证错误

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方法调用,就像您在yup模式中对subject所做的那样。

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

最新更新