小编Gol*_*ket的帖子

是的/使用动态密钥进行 Formik 验证

我正在尝试验证具有动态数量字段的表单 - 即,数据从确定显示多少行的 API 返回,并且对于每一行,都有一个必填字段,需要用户为他们选择一个输入进步。

要使用的软件包是 Yup 和 Formik 一起使用。在查看 Yup 教程时,该对象通常是按如下方式构建的:

let userSchema = object({
  name: string().required(),
});
Run Code Online (Sandbox Code Playgroud)

定义名称等键的位置。但是,我的密钥需要是动态的,即 field1、field2 等,因为我事先不知道会有多少个。

我想循环遍历我的对象并将一组动态键传递给模式 - 基本上,无论对象有多长,我都有多少个键。

let userSchema = object({
  [field1]: string().required(),
  [field2]: string().required(),
});
Run Code Online (Sandbox Code Playgroud)

但是,我不确定如何实现这个结果。我可以循环遍历我的对象并尝试构建一组键,例如

let myObject = {}
myKeyObject.forEach((key) => myObject[key] = string().required());
Run Code Online (Sandbox Code Playgroud)

然后传递myKeyObject给object.shape,但这通常会产生TS错误。有谁知道 Yup 中有任何用于动态表单的实用程序吗?除非我遗漏了某些内容,否则我在文档中没有看到任何可以使使用动态表单变得更容易的内容

typescript reactjs yup formik

9
推荐指数
1
解决办法
1万
查看次数

标签 统计

formik ×1

reactjs ×1

typescript ×1

yup ×1