когда нечего делать, а творческая душа требует реализации и хочется что-то сделать или написать, то я пишу сюда или делаю что-то на этом сайте. Кому интересна web-разработка, wordpress и то что рядом с этим, то заходите на мой сайт и читайте всякое...
Валидация форм React, часть 2 [Видео]. Работа с файлами в Formik & Yup
В данном видео вы узнаете как работать с файлами в Formik и как их валидировать в yup. Так же вы познакомитесь со способами изменения схемы валидации поле в зависимости от данных других полей.
Изменение схемы валидации в зависимости от данных формы.
Работа с файлами в Formik и их валидация в yup
Изменение схемы Yup в зависимости от данных формы
Для изменения схемы валидации в yup есть метод when. Он доступен для всех типов схем yup (string, number, array, mixed, …). Метод when принимает 2 аргумента: ключ поля или массив ключе полей, значения которых влияют на схемы валидации; «билдер», состоящий из (в основном) двух полей «is» и «then». Поле «is» должно содержать значение или функцию, если оно содержит значение то нужно вставить такое значение поля, на которое мы ссылаемся, которое нам нужно, чтобы применить новую схему, если это функция то она просто должна вернуть true, аргументами в ней будут значения из формы, ключи которых мы перечислим в первом аргументе метода when . Поле «then» — это схема по которой будет валидироваться поле в случае если «is» вернёт true.
Выше приведён код, который читается следующим образом: есть поле «likeRegister», которое обозначает, что фактический адрес совпадает с юридическим. Если адреса совпадают то поле «addressActual» не обязательно, а если же не совпадают (likeRegister === false) то поле становиться обязательным.
Работа с файлами в Formik вместе с Yup
Я уже рассматривал как можно работать с файлами в Formik и озвучил несколько решения проблем, которые есть в этой связке в статье «Создание FileList. Передаём FileList в input ref React«. Там есть подробный код с созданием компонента с файловым инпутом.
Для понимания этого кода нужно уяснить пару вещей:
Инпут содержит FileList (files) — массивоподобную структуру
Для работы с массивами в Formik используется FieldArray
Значение такого инпута лучше хранить в виде объекта, так легче осуществлять валидаци
Валидируйте формат файла через mime-type, а не через расширение. Это более надёжно
Валидация mime-type
const avaliableMimeType = ['application/pdf', 'image/jpeg', 'image/png']
// Внутри схемы
type: yup.string().oneOf(avaliableMimeType, 'Недопустимый тип файла')
В данном примере мы разрешили принимать pdf, jpeg/jpg и png. Больше mime-type вы можете найти в интернете, например на википедии
Поддержи Xakplant
Я давно хочу развить видеоверсию, но пока этого не получается из-за нехватки ресурсов. Сейчас я собираю деньги на новый компьютер и микрофон. Поддержи xaklant и ты увидишь полезные видео быстрее.