Невозможно проверить правильность выбора при использовании Formik с библиотекой Yup - PullRequest
Новая
       13

Невозможно проверить правильность выбора при использовании Formik с библиотекой Yup

2 голосов
/ 02 апреля 2020

Мне нужно проверить опцию Select и некоторые другие поля, используя Formik и Yup. На самом деле другие поля проверяются, но отреагировать на выбор не удалось. Я попробовал некоторые коды из онлайн, не помогая. Мой код, подобный этому

Мои правила Yup 

export const validationRules = Yup.object().shape({
  name: Yup.string().required('Customer name required'),
  email: Yup.string()
    .email('Invalid email')
    .required('Customer email required'),
  geography: Yup.object().required('Please select Geography'),
});

Мой выбор: 

const geography = [
  { code: 'US', label: 'US', id: 1 },
  { code: 'SG', label: 'SG', id: 2 },
  { code: 'AUS', label: 'AUS', id: 3 },
  { code: 'OTHER', label: 'OTHER', id: 4 },
];

исходные данные 

 const [intialData, setintialData] = useState({
    name: '',
    email: '',
    geography: {},
  });

I'mam рендеринг подобен этому 

return(
      <Formik
        initialValues={intialData}
        validationSchema={validation rules}
        onSubmit={onSaveData}
      >
        {({ errors, setFieldValue, setFieldTouched, values, handleChange }) => (
          <Form noValidate>
            <div className="row">
              <div className="col">
                <label className="col-form-label-sm">Customer Name</label>
                <Field type="text" className="form-control" name="name" />
                {errors.name ? errors.name : ''}
              </div>
              <div className="col">
                <label className="col-form-label-sm">Customer Email</label>
                <Field type="email" className="form-control" name="email" />
                {errors.email ? errors.email : ''}
              </div>
            </div>
            <div className="row">
              <div className="col">
                <label className="col-form-label-sm">Geography</label>
                <Select
                  name="geography"
                  onBlur={() => setFieldTouched('geography', true)}
                  onChange={option => setFieldValue('geography', option)}
                  options={geography}
                />
                 {errors.geography ? errors.geography : ''}
              </div>
            </div>
            <div className="modal-footer">
              <button type="submit" className="btn btn-primary">
                Save changes
              </button>
            </div>
          </Form>
        )}
      </Formik>
)

Поля электронной почты и имени проверяются без реакции-выбора. Так что я утешил свой объект ошибки Yup, в котором отображаются только имя и проверка электронной почты, а не география. География - это изначально пустой объект, заданный в исходных данных. Пожалуйста, помогите мне проверить ответ-выберите

Ответы [ 2 ]

0 голосов
/ 03 апреля 2020

Здравствуйте. Вот как исправлена ​​проблема, и она работала .. 

               <Select
                  onBlur={() => setFieldTouched('gerography', true)}
                  onChange={(option, e) => {
                    handleChange('gerography', option);
                    this.onGeographyChange(option); //set values to state
                    setFieldValue('gerography', option);
                  }}
                  options={gerographys}
                  name="gerography"
                  value={state.gerography}
                />
0 голосов
/ 02 апреля 2020

Вы должны проверить object следующим образом: 

name: Yup.string().required('Customer name required'),
email: Yup.string()
        .email('Invalid email')
        .required('Customer email required'),
geography: Yup.object()
            .shape({
              id: Yup.string()
            .required('Please, select office'),
          })

И вы можете получить ошибку от: 

{errors.geography ? errors.geography.id : ''}
...