Formik - arrayfields - 验证处理

Question

我正在使用 formik/material ui —— 是的验证。我正在努力获得显示/处理字段数组的验证

我的架构和验证目前对于每个字段都是这样的。

  "fields": [
    {
      "type": "date",
      "label": "Start Date",
      "name": "startDate",
      "validation": yup.date().default(function () { return new Date() }).required("date is required").nullable().typeError(''),
      "minDate": moment().add(1, 'weeks'),
      "maxDate": moment().add(8, 'weeks'),
      "disablePast": true,
      "disableFuture": false,
      //"disabled": true
    },
    {
      "type": "date",
      "label": "End Date",
      "name": "endDate",
      "validation": yup.date().default(function () { return new Date() }).required("date is required").nullable().typeError(''),
      "minDate": moment().add(1, 'weeks'),
      "maxDate": moment().add(8, 'weeks'),
      "disablePast": true,
      "disableFuture": false,
      //"disabled": true
    }
  ]

我在 formik 上看到过——他们有一些这样的验证——但我如何将它应用到我的日期代码库中？

https://formik.org/docs/api/fieldarray

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

我的 fieldarray 看起来像这样——我相信错误应该出现在字段组下——字段外边框变为红色——但是当我将日期设为空时它似乎不起作用——就像要求的日期工作一样吗？

    <>
      <FieldArray
        name={item.name}
        onChange={event => {
            console.log("event field array change", event)
        }}
      >
        {({ insert, remove, push }) => (
          <div className="field field-array">
                <div className="row" key={0}>
                  {item.fields.map((ch, inx) => (
                    <span key={"x"+inx}>
                        <div className="col-x">
                         <Field
                          name={`${item.name}.${ch.name}`}
                         >
                           {({
                             field, // { name, value, onChange, onBlur }
                             form,
                             meta,
                           }) => (
                             <>
                                <LocalizationProvider dateAdapter={AdapterDayjs}>
                                  <DatePicker
                                    label={ch.label}
                                    disablePast={ch.disablePast}
                                    disableFuture={ch.disableFuture}
                                    minDate={moment(ch.minDate)}
                                    maxDate={moment(ch.maxDate)}
                                    value={field.value? moment(field.value).format('YYYY-MM-DD'): moment().format('YYYY-MM-DD')}
                                    {...field}
                                    onChange={(value) => {
                                      form.setFieldValue(field.name, value);
                                      this.props.onHandle(field.name, value);
                                    }}
                                    renderInput={(params) => {
                                        return (<TextField {...params} name={field.name} />)
                                    }}
                                  />
                                </LocalizationProvider>

                                {meta.touched && meta.error && (
                                 <div className="error">{meta.error}</div>
                                )}
                             </>
                           )}
                         </Field>
                        </div>
                         {inx === 0 &&
                           (<span></span>)
                         }
                    </span>
                  ))}
                </div>
          </div>
        )}
      </FieldArray>
    </>

Answer 1

我解决了这个问题

"validation": yup.array().of( yup.object().shape({ firstName: yup.string().min(4, 'too short').required('Required'), lastName: yup.string().min(3, 'cmon').required('Required'),  }) ).min(1, 'Minimum of 1 friends')

-- 但在显示错误时必须检查它是数组还是字符串以避免渲染错误

在添加更多按钮下显示主列表的数组错误。

          <FormHelperText
              error={(form.errors[parent.name] && form.errors[parent.name].length > 0 ? true : false)}
          >
            {typeof form.errors[parent.name] === "string" &&
                <>{form.errors[parent.name]}</>
            }
          </FormHelperText>

在字段下 - 元错误

                        {(getHelperVisibility(values, ch)) &&
                          <FormHelperText
                              error={meta.touched && (meta.error && meta.error.length > 0 ? true : false)}
                          >
                            {meta.error}
                          </FormHelperText>
                        }