javascript 如何使用react-hook-form和useFieldArray对动态表单进行yup验证

f2uvfpb9  于 2023-02-02  发布在  Java
关注(0)|答案(6)|浏览(312)

我尝试使用react-hook-form的useFieldArray钩子创建一个动态表单,用户应该能够添加或删除字段,从而使其成为动态表单,我已经从tutorial中获得了灵感,但缺少的部分是如何实现对状态的错误验证,这将是一个对象数组:{email: string}[].(该对象将接受更多的键/值对。为了简单起见,我省略了其余的键/值对。)
我试过使用yup作为验证模式,如下所示:

const schema = yup.array().of(
  yup.object().shape({
    email: yup.string().email().required(),
  }),
)

React钩子形式的实现是:

import * as yup from 'yup'
import { yupResolver } from '@hookform/resolvers/yup'
import { useForm, useFieldArray, Controller } from 'react-hook-form'

const { register, control, handleSubmit, errors } = useForm({
  resolver: yupResolver(schema),
  mode: 'onChange',
})
const { fields, append, remove } = useFieldArray({
  control,
  name: 'users',
})

形式或多或少根据教程在上面的链接。
当控制台从useForm钩子记录error对象时,它总是给出一个空对象{}。看起来它不起作用。我可能在这里漏掉了什么。问题是什么?

f0ofjuux

f0ofjuux1#

也许您想使用context参数来切换模式?
上下文:这个上下文对象是可变的,将被注入到解析器的第二个参数或Yup验证的上下文对象中。

import * as React from "react";
import { useForm } from "react-hook-form";
import * as Joi from "joi";

const validationSchema1 = Joi.object({
  username: Joi.string()
    .alphanum()
    .min(3)
    .max(30)
    .required()
});

const validationSchema2 = Joi.object({
  username: Joi.string()
    .alphanum()
    .min(3)
    .max(30)
    .required()
});

const App = () => {
  const [schemaContext, setSchemaContext] = useState({ schemaA: false })
  const { register, handleSubmit, errors } = useForm({
    context: schemaContext, // use the context switch here
    resolver: async (data, context) => {
      const { error, value: values } = context.is1 ? validationSchema1.validate(data, {
        abortEarly: false
      }) : validationSchema2.validate(data, {
        abortEarly: false
      });

      return {
        values: error ? {} : values,
        errors: error
          ? error.details.reduce((previous, currentError) => {
              return {
                ...previous,
                [currentError.path[0]]: currentError
              };
            }, {})
          : {}
      };
    }
  });

  const onSubmit = data => {
    console.log(data)
  };

  return (
    <div className="App">
      <h1>resolver</h1>
      
      <form onSubmit={handleSubmit(onSubmit)}>
        <label>Username</label>
        <input type="text" name="username" ref={register} />
        {errors.username && <p>errors.username.message</p>}
        <input type="submit" />
      </form>
    </div>
  );
};
dced5bon

dced5bon2#

    • React挂钩表单v7**
    • 是的,使用动态字段响应钩子窗体-useFieldArray**

import { string, object, array } from 'yup';

const formSchema = {
  name: string().required("Name is required").min(7, 'Message'),
};

const schema = object({
  test: array()
   .of(object().shape(formSchema))
});

export default schema;
const methods = useForm({
  resolver: yupResolver(schema),
});
    • 显示错误**
<div style={{ fontSize: 14 }}>{errors?.test?.[index]?.name?.message}</div>
lg40wkob

lg40wkob3#

我使用useForm钩子的resolver属性方法从表单中的一个字段的值中识别应该使用的验证方案。
下面的代码适用于我的用例,可能对您有所帮助

function formValidatorSchemaByPaymentModalityType(paymentModalityType?: ModalityTypes) {
    switch (paymentModalityType) {
        case ModalityTypes.CREDIT_CARD:
          return creditCardSchemaValidation;
        default:
        return defaultSchemaValidation;
    }
}

const methods = useForm({
    resolver: (data, context, options) => {
      const validatorSchema = formValidatorSchemaByPaymentModalityType(
        data.paymentType.value,
      )
      return yupResolver(validatorSchema)(data, context, options);
    },
});
im9ewurl

im9ewurl4#

我认为你应该指定你的数组名。像这样:

{
  teammates: yupArray().of(
      yupObject().shape({
        email: stringSchemaBuilder("Email").email(),
        expertise: arraySchemaBuilder(false, "Expertise", true, 2, 5),
      })
  ),
};

where teammates is my array name
piwo6bdm

piwo6bdm5#

const { register, control, handleSubmit, formState: { errors } } = useForm({. resolver: yupResolver(schema),  mode: 'onChange' })

errors[`users[${index}].email`]
bmvo0sr5

bmvo0sr56#

我也遇到了同样的问题。我通过参考以下内容更改控制器名称来解决它!

`test[${inde}].email` ->  `test.${index}.email`

参考链接:https://legacy.react-hook-form.com/api/useform/register-〉规则

相关问题