【问题标题】:Yup validation with FieldsArray, ReactJS, redux-from是的,使用 FieldsArray、ReactJS、redux-from 进行验证
【发布时间】:2019-05-25 07:30:39
【问题描述】:

我正在使用 yup 验证并尝试构建一个条件验证对象

通常,我使用 redux 表单中的 Field 来处理表单输入值并使用 yup 对其进行验证,但在另一种情况下,我使用 FieldArray 来实现复杂条件,这是我使用 FieldArray 的代码:

 <form onSubmit={handleSubmit}>
      <FieldArray
          name="session"
          component={RenderSession}
        />
 </form>

这是我在 FieldsArray 中绑定的组件,

export const RenderSession = ({ fields }) => {return (
  {fields.map((member, index) => (
    <div key={index}>
      <Field
        name={`${member}.name`}
        validate={validateProps}
      />
    </div>
    <Button onClick={() => fields.push({})}>
      Add
    </Button>
  </Row>
</>

我想检查验证字段名称的值 = {$ {member} .startTime} 如何使用是的 请给我一个将 yup 与 FieldsArray 或其他任何东西一起使用的解决方案。在这种不可能的情况下,教我另辟蹊径, 随意提问, 谢谢

【问题讨论】:

  • 给我一个希望,Plzzz
  • 你能创建演示来重现问题吗?
  • 也许你可以使用 Yup.test('isValid', value => {// return true or false})

标签: reactjs redux-form yup


【解决方案1】:

从 Yup 文档中,您可以根据其架构 IE 检查数组的元素:

array().of(object().shape({ num: number().max(4) }))

参考:https://github.com/jquense/yup#arrayoftype-schema-schema

或更合适的例子:

const schema = Yup.object().shape({
  friends: Yup.array()
    .of(
      Yup.object().shape({
        name: Yup.string()
          .min(4, 'too short')
          .required('Required'), // these constraints take precedence
        salary: Yup.string()
          .min(3, 'cmon')
          .required('Required'), // these constraints take precedence
      })
    )
    .required('Must have friends') // these constraints are shown if and only if inner constraints are satisfied
    .min(3, 'Minimum of 3 friends'),
});

【讨论】:

  • @MosèRaguzzini 如果我想传递动态最小值和最大值怎么办?
  • 嗨,伙计,它看起来像:Yup.string().min(4, 'too short').max(8, 'too long')
猜你喜欢
  • 1970-01-01
  • 2021-11-21
  • 2018-01-02
  • 2018-01-10
  • 2018-12-06
  • 2020-07-05
  • 1970-01-01
  • 2022-10-30
  • 1970-01-01
相关资源
最近更新 更多