是的，使用 Formik，Material-UI - React 的表单数组和嵌套表单组的模式生成器

Question

我有一个 yup 模式生成器，用于生成 yup 模式，它工作正常，但在处理表单数组和嵌套表单组时失败。

是的架构生成器

const createYupSchema = (schema, config)=> {
  if (config.validation) {
    const { validationType, validations = [] } = config.validation;
    if (!yup[validationType]) {
      return schema;
    }
    let validator = yup[validationType]();
    validations.forEach((validation) => {
    const { params, type } = validation;
    if (!validator[type]) {
      return;
    }
    validator = validator[type](...params);
  });
   schema[config.props.name] = validator;
  }
 return schema;
}

我的表单结构示意图

"addressType":{
  "props":{
    "name":"addressType",
    "label":"Address type:",
    "type":"radio"
   },
  "value":"workPlace",
  "validation":{
    "validationType":"string",
    "validations":[
      {
        "type":"required",
        "params":[
           "Address is required"
        ]
      }
    ]
   }
 },
"students":{
  "props":{
    "name":"students"
  },
  "fields":{
    "studentName":{
     "name":"studentName",
     "type":"text",
     "label":"student name"
    },
  "age":{
     "name":"age",
     "type":"number",
     "label":"Age"
    }
 },
"validation":{
  "name":"students",
  "validationType":"array",
  "validations":[
     {
        "studentName":{
           "validations":[
              "type":"required",
              "params":[
                 "StudentName is required"
              ]
           ]
        }
     }
  ]
 }
}

如何为 Formik 数组和嵌套表单组动态实现 yup 架构。

提前致谢

Answer 1

您应该使用循环调用来使其适用于数组和对象。

if (validation.type === 'array' || validation.type === 'object') {
 const innerSchema = createYupSchema({}, {
    props: { name: 'key' },
    validations: validation.validations
 });
 validator = yup.array().of(
    yup.object().shape(innerSchema[key])
 );
}