Formik + yup: как проверить схему расположения, где поля (страна, штат, город) не являются обязательными, но если они заполнены, то каждое должно быть заполнено? - PullRequest
Новая
       12

Formik + yup: как проверить схему расположения, где поля (страна, штат, город) не являются обязательными, но если они заполнены, то каждое должно быть заполнено?

0 голосов
/ 04 мая 2019

У меня есть схема ниже 

validationSchema={yup.object().shape({
  firstName: yup
    .string()
    .required("Name cannot be empty")
    .matches(NAME_REGEX, "Name can only contain english characters"),
  lastName: yup
    .string()
    .required("Name cannot be empty")
    .matches(NAME_REGEX, "Name can only contain english characters"),
  location: yup
    .object()
    .nullable()
    .shape({
      country: yup.string().required(),
      state: yup.string().required(),
      city: yup.string().required()
    })
})}

Проверка для firstName и lastName работает нормально, но я не знаю, как проверить location.
Требование : location вовсе не обязательно для заполнения.Но если какое-либо (country / state, city) поля заполнено, то все три должны быть заполнены.Либо все, либо ничего.

Хотя я пытался проверить его, как указано выше, но он не работает.

Другое требование проверки: эти значения выбираются из элемента select html, из которыхпервый <option> равен <option key={0}>-select-</option>.Поэтому я не хочу, чтобы мои пользователи также выбирали эту опцию.На данный момент я обрабатываю его в onSubmit, проверяя значения, и если они содержат -select-, то эти значения не будут учитываться и будут заменены на существующие.

update:
location никогда не может быть нулевым.Если пользователь не установил ни одно из полей местоположения, то location также будет иметь вид: 

location: {
   country: null,
   state: null,
   city: null
}

location никогда не может быть нулевым, только его свойства могут быть.

Как следуетЯ делаю эти проверки?

1 Ответ

1 голос
/ 04 мая 2019

Необходимо установить значение по умолчанию location равным нулю, используя mixed.default (значение) , например: 

location: yup
    .object()
    .default(null)
    .nullable()
    .shape({
      country: yup.string().required(),
      state: yup.string().required(),
      city: yup.string().required()
    })

Обновление:

местоположение никогда не может быть нулевым, только его свойства могут быть.

Вы можете сделать это так: 

location: object()
    .shape({
      country: string().default(null).nullable().test(
        value => value === null || value,
      ),
      state: string().default(null).nullable().test(
        value => value === null || value,
      ),
      city: string().default(null).nullable().test(
        value => value === null || value,
      )
    })
...