验证时从Material UI Radio返回布尔值以在Yup中使用

Question

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),
    })
});

材料UI的Radio表单仅允许value字段中的字符串值。 示例：

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

将值更改为：value={true}或除字符串以外的任何内容都会破坏Radio组件。 用yup.boolean强制在yup验证中使用单选值没有帮助。

我的替代方法是切换到内联验证，这不可行。

我要执行的操作：如果isBig返回true，则要求count为至少5位数字的数字，否则请忽略它。

我在这里想念什么？有没有一种方法可以通过yup使用除.when以外的其他条件来有条件地验证相关值？还是我在无线电组件中缺少明显的东西？

感谢任何帮助，在线Yup示例并不超出Yup文档提供的示例范围。

Answer 1

从验证字符串中删除字符串应该不是问题。另外，min(5)并不意味着最少5位数字，它意味着数字> =5。对于最少5位数字，您将需要min(10000)。

这是在字符串上使用when的示例。如果转到CodeSandbox，则会看到myForm1无效（由于匹配“ a”，因此强制最小值为10000），但是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);