Javascript.RU

Создать новую тему Ответ
 
Опции темы Искать в теме
  #1 (permalink)  
Старый 31.05.2022, 16:54
Аспирант
Отправить личное сообщение для maplol123@gmail.com Посмотреть профиль Найти все сообщения от maplol123@gmail.com
 
Регистрация: 30.06.2019
Сообщений: 41

Как проверить, не имеет ли первый массив значения из второго массива с помощью YUP
Проблема с валидацией через модули yup и react-hook-form.
Я выбираю первый radio, чтобы отображать первый массив radio с цветами, выбираю один из цветов, затем я выбираю второй radio, чтобы отображать второй массив radio с другими цветами. Если мой выбранный цвет из первого массива не включает второй массив, как показать ошибку?

CodeSandbox: https://codesandbox.io/s/focused-mic...e=/src/App.tsx

import React, { useState } from "react";

import { useForm } from "react-hook-form";
import { yupResolver } from "@hookform/resolvers/yup";
import * as yup from "yup";

export default function App() {
  const schema = yup.object().shape({
    choose: yup.string().typeError("select first or second").required(),
    color: yup
      .string()
      .typeError("selected color doesn't include of this array")
      .required("select color")
  });

  const {
    register,
    formState: { errors },

    handleSubmit
  } = useForm({
    resolver: yupResolver(schema)
  });

  const onSubmit = (data: any) => {
    console.log(data);
  };

  const onError = (error: any) => {
    console.log(error);
  };

  let colors = [
    ["black", "white", "pink"],
    ["black", "red", "blue"]
  ];
  const [select, setSelect] = useState<number>();

  return (
    <form onSubmit={handleSubmit(onSubmit, onError)}>
      <label>
        <input
          type="radio"
          onClick={() => setSelect(0)}
          value={"first"}
          {...register("choose")}
        />
        first
      </label>
      <label>
        <input
          type="radio"
          onClick={() => setSelect(1)}
          value={"second"}
          {...register("choose")}
        />
        second
      </label>
      <p> {errors && errors.choose?.message}</p>

      <div>
        {select != null &&
          colors[select].map((color: any, i: number) => (
            <label key={i}>
              <input
                type="radio"
                value={color}
                {...register("color")}
              />
              {color}
            </label>
          ))}
        {select != null && <p> {errors && errors.color?.message}</p>}
      </div>

      <button type="submit">Add</button>
    </form>
  );
}
Ответить с цитированием
Ответ



Опции темы Искать в теме
Искать в теме:

Расширенный поиск


Похожие темы
Тема Автор Раздел Ответов Последнее сообщение
Как вы относитесь к наркоманам? Maxmaxmaximus7 Оффтопик 7 05.02.2014 11:29
Как создать двумерный массив с помощью циклов. dima*** Ваши сайты и скрипты 30 16.12.2012 11:58
как найти и удалить массив из массива? FRIE Общие вопросы Javascript 8 14.03.2011 14:48
Как с помощью JQuery проверить длину введенного сообщения? Bandicoot jQuery 1 13.03.2011 13:12
Как проверить название массива? Andrej_2 Общие вопросы Javascript 2 30.06.2010 20:07