Возвратите логическое значение из Material UI Radio для использования в Yup. При проверке - PullRequest
Новая
       10

Возвратите логическое значение из Material UI Radio для использования в Yup. При проверке

0 голосов
/ 19 февраля 2019

Yup допускает проверку на основе другого значения с использованием .when.

Пример: 

var inst = yup.object({
  isBig: yup.boolean(),
  count: yup
    .number()
    .when('isBig', {
      is: true, // alternatively: (val) => val == true
      then: yup.number().min(5),
      otherwise: yup.number().min(0),
    })
});

Радио-формы пользовательского интерфейса материала допускают только строковые значения в поле value.Пример: 

<Radio
 checked={this.state.selectedValue === 'a'}
 onChange={this.handleChange}
 value="a"
 name="radio-button-demo"
 aria-label="A"
/>

Изменение значения на: value={true} или любое другое значение, кроме строки, разрывает компонент Radio.Принудительная установка значения радио при проверке yup с помощью yup.boolean не помогает.

Моя альтернатива - переключение на встроенную проверку, что не является идеей.

Что я пытаюсь сделать: если isBig возвращает true, требуется, чтобы count был числом не менее 5 цифр, в противном случае игнорируйте его.

Что мне здесь не хватает?Есть ли способ условно проверить связанные значения через yup, используя проверку, отличную от .when?Или я упускаю что-то в компоненте Radio, что очевидно?

Цените любую помощь, примеры Yup онлайн не выходят далеко за рамки того, что документация Yup предоставляет в качестве примеров.

1 Ответ

0 голосов
/ 20 февраля 2019

Это не должно быть проблемой для удаления строки для проверки.Также min(5) означает не менее пяти цифр, это означает число> = 5. Для минимума 5 цифр вам потребуется min(10000).

Вот пример использования whenна веревочке.Если вы перейдете в CodeSandbox, то увидите, что myForm1 недопустимо (принудительно применяется минимум 10000, поскольку соответствует «a»), но myForm2 допустимо, поскольку «b» не соответствует условию. 

import React, { useState, useEffect } from "react";
import ReactDOM from "react-dom";
import * as yup from "yup";

const myForm1 = {
  radioValue: "a",
  num: 1234
};
const myForm2 = {
  radioValue: "b",
  num: 1234
};
const schema = yup.object({
  radioValue: yup.string(),
  num: yup.number().when("radioValue", {
    is: "a",
    then: yup.number().min(10000),
    otherwise: yup.number().min(0)
  })
});

function App() {
  const [myForm1IsValid, setMyForm1IsValid] = useState(null);
  const [myForm2IsValid, setMyForm2IsValid] = useState(null);
  useEffect(async () => {
    setMyForm1IsValid(await schema.isValid(myForm1));
    setMyForm2IsValid(await schema.isValid(myForm2));
  }, []);
  return (
    <div className="App">
      <h1>myForm1 is valid: {JSON.stringify(myForm1IsValid)}</h1>
      <h1>myForm2 is valid: {JSON.stringify(myForm2IsValid)}</h1>
    </div>
  );
}

const rootElement = document.getElementById("root");
ReactDOM.render(<App />, rootElement);

Edit yup

...