Question

我正在使用Formik FormArray对象并尝试使用验证似乎无效。

即使进行了简单的必需验证，仍然允许提交空字段
添加正则表达式会引发错误
我不知道错误消息是否显示
很难调试

这是我的示例表单的摘要（抱歉，不是完整的代码，而是全部包含在父容器中）：

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

      domains: Yup.array()
        .required('Required')
        .matches(/^(?!:\/\/)([a-zA-Z0-9-_]+\.)*[a-zA-Z0-9][a-zA-Z0-9-_]+\.[a-zA-Z]{2,11}?$/, {
          message: 'Invalid Domain',
          excludeEmptyString: true,
        })
        .matches(/(www\.| http: \/\/|https:\/\/)/, {
          message: 'Should not contain www.| http:&#47;&#47; | https:&#47;&#47;',
          excludeEmptyString: true,
        })
    })

    const ErrorMessage = ({ name }) => (
      <Field
        name={name}
        render={({ form }) => {
          const error = getIn(form.errors, name)
          const touch = getIn(form.touched, name)
          return touch && error ? error : null
        }}
      />
    )

    {
      ({ handleChange, handleBlur, values, errors, touched }) => (
        <FormGroup>

          <Label>Domains</Label>

          <FieldArray
            name="domains"
            render={arrayHelpers => (
              <>
                <ul className="list-unstyled">
                  {values.domains.map((domain, index, domains) => (
                    <li className="mb-2" key={index}>
                      <InputGroup>
                        <Field
                          name={`domains[${index}]`}
                          className="form-control"
                        />
                        <InputGroupAddon addonType="append">
                          <Button
                            color="primary"
                            onClick={() => arrayHelpers.remove(index)}
                          >
                            <strong>x</strong>
                          </Button>
                        </InputGroupAddon>
                        <ErrorMessage name={`domains[${index}]`} />
                      </InputGroup>
                    </li>
                  ))}
                  <Button
                    className="mt-2"
                    color="secondary"
                    onClick={() => arrayHelpers.push('')}
                  >
                    Add a Domain
                              </Button>
                </ul>
              </>
            )}
          />

        </FormGroup>

我试图删除正则表达式验证，但没有用。谁能推荐该怎么做？谢谢

Answer 1

https://jaredpalmer.com/formik/docs/api/fieldarray

formik站点上的对象数组示例：

    const schema = Yup.object().shape({
      domains: Yup.array()
        .of(
          Yup.object().shape({
            name: Yup.string()
              .min(4, 'too short')
              .required('Required'), // these constraints take precedence

用于访问字符串数组：

       domains: Yup.array().of(
         Yup.string()
         .trim()
         .required('Required')

Answer 2

我没有添加评论的名声，但是我对arrayHelper和Formik也遇到了麻烦。您可能没有将domains数组中最后一项的初始值设置为并为空字符串吗？如果您对初始值进行某种类型的获取，则将是比较并缺少提交域[$ {index}]时要包含的最后一个值的数组。因此，以我的经验，它允许您提交表单，因为它没有初始值，除非您单击输入，然后将值设置为“”或您选择键入的任何内容。

Formik FieldArray验证未验证

2 个答案: