如何使用动态字段名称创建Formik YUP架构? [英] How do you Create a Formik YUP Schema with Dynamic Field Names?

查看:126
本文介绍了如何使用动态字段名称创建Formik YUP架构?的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

如何使用动态点表示法字段名称创建YUP架构?以下架构无效.我如何动态地遍历Costs.0.item,Costs.1.item,Costs.2.item和Costs.0.amount,Costs.1.amount,Costs.2.amount?感谢您的帮助!

How do you create a YUP schema with dynamic dot notation field names? The below schema is not valid. How would I iterate through Costs.0.item, Costs.1.item, Costs.2.item AND Costs.0.amount, Costs.1.amount, Costs.2.amount dynamically? Any help is appreciated!

const IpSchema = Yup.object().shape({

        Project_Title: Yup.string()
            .min(2, 'Too Short!')
            .max(255, 'Too Long!')
            .required('Required'),
        Costs.0.item: Yup.string()
            .min(2, 'Too Short!')
            .max(255, 'Too Long!')
            .required('Required'),
        Costs.1.item: Yup.string()
            .min(2, 'Too Short!')
            .max(255, 'Too Long!')
            .required('Required'),
        Costs.2.item: Yup.string()
            .min(2, 'Too Short!')
            .max(255, 'Too Long!')
            .required('Required'),
        Costs.0.amount: Yup.string()
            .min(2, 'Too Short!')
            .max(255, 'Too Long!')
            .required('Required'),
        Costs.1.amount: Yup.string()
            .min(2, 'Too Short!')
            .max(255, 'Too Long!')
            .required('Required'),
        Costs.2.amount: Yup.string()
            .min(2, 'Too Short!')
            .max(255, 'Too Long!')
            .required('Required'),

    });

推荐答案

如果将YUPformik结合使用,则可以检查 docs 的其他方式,您可以这样做:

If you use YUP with formik you can check this. On docs provided example. And otherwhise according docs you can do it like this:

const IpSchema = Yup.object().shape({
  Project_Title: Yup.string()
                    .min(2, 'Too Short!')
                    .max(255, 'Too Long!')
                    .required('Required'),
  Costs: Yup.array().of(
              Yup.object()
                    .shape({
                      item: Yup.string()
                        .min(2, 'Too Short!')
                        .max(255, 'Too Long!')
                        .required('Required'),
                      amount: Yup.string()
                        .min(2, 'Too Short!')
                        .max(255, 'Too Long!')
                        .required('Required')
                    })
                ),
});

这篇关于如何使用动态字段名称创建Formik YUP架构?的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!

查看全文
登录 关闭
扫码关注1秒登录
发送“验证码”获取 | 15天全站免登陆