Блог

Итак, во время изучения форм я нашел этот пакет — да, для проверки. Но у меня возникает проблема

Итак, я объясню постановку проблемы и то, что я пробовал до сих пор.

Итак, вариант использования таков: у меня есть поле выбора, которое имеет два параметра, резидентный и нерезидентный, поэтому на основе выбора у меня есть разные поля, которые я отображаю

• Резидент: first_name, last_name
• Нерезидент: passport_number, country, state

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

 const required = () => "Field is required";

const resident_schema = object({
  first_name: string().required(required).nullable(),
  last_name: string().required(required).nullable(),
});

const non_resident_schema = object({
  passport_number: string().required(required).nullable(),
  country: object().required(required).nullable(),
  state: object().required(required).nullable(),
});

const schemaBasedCitizen = {
  RESIDENT: resident_schema,
  NON-RESIDENT: non_resident_schema,
};

export const validationSchema = object().shape({
  citizen: object().required(required).nullable(),
  { ...object().when("citizen", {
    is: (value) => !!schemaBasedCitizen[value.toUpperCase()],
    then: (value) => schemaBasedCitizen[value.toUpperCase()],
  }) },
});
  

И мой html состоит из

 <select>
 <option disabled selected value> -- select an option -- </option>
 <option value='resident'>Resident</option>
 <option value='non-resident'>Non-Resident</option>
</select>
  

Я не могу распространяться, поскольку требуется ключ, так есть ли способ добиться этого.

Обновить

Схема, когда значение находится в выбранном поле

 export const validationSchema = object().shape({
      citizen: object().required(required).nullable(),
      first_name: string().required(required).nullable(),
      last_name: string().required(required).nullable(),
    });
  

Схема, когда значение не является резидентным в поле выбора

 export const validationSchema = object().shape({
      citizen: object().required(required).nullable(),
      passport_number: string().required(required).nullable(),
      country: object().required(required).nullable(),
      state: object().required(required).nullable(),
    });
  

В основном проверка является динамической на основе значения в поле выбора гражданина.

у yup есть такая вещь, что он может ссылаться только на родственные поля (или контекст), используя when .

Ваше citizen поле НЕ является родственным по отношению к остальной части объекта и не может использоваться для условного изменения схемы объекта, оно является дочерним объектом объекта, поэтому вы не можете ссылаться на него как на родственное поле через when .

Одним из способов добиться желаемого может быть использование отложенной схемы:

 import { lazy } from 'yup';

const residentSchema = ...
const nonResidentSchema = ...

export const validationSchema = lazy(({citizen}) => citizen === 'resident' ? residentSchema : nonResidentSchema);