Блог

Главная - Вопросы по программированию - распознаватель yup в форме react-hook, ошибка устранения неполадок с реактивной загрузкой из дочернего компонента

распознаватель yup в форме react-hook, ошибка устранения неполадок с реактивной загрузкой из дочернего компонента

#reactjs #yup #react-hook-form #reactstrap

Вопрос:

У меня есть форма с вспомогательными компонентами, которые содержат мой входной компонент.

  • правильно возвращает ошибку проверки, если входные данные находятся НЕПОСРЕДСТВЕННО в форме
  • не удается вернуть ошибку проверки, ввод которой находится внутри дочернего компонента.

реакция-крючок-форма ^6.9.2

да ^0,32,8

yupResolver @hookform/решатели ^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()}
    />
)

Комментарии:

1. Вы пропускаете required вызов метода на своем AccountTitleLine1 , как вы это делаете subject . Это должно быть AccountTitleLine1: yup.string().required("Account Title is Required")

2. да, видел это как раз перед тем, как уйти на обед. добавьте в качестве ответа вместо комментария, и я отмечу его как правильный ответ.

Ответ №1:

Вы пропускаете required вызов метода AccountTitleLine1 , как subject и в вашей схеме yup.

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