如何动态访问嵌套错误/触动formik字段
动态访问嵌套错误/触动formik字段是指在使用formik表单库时，如何通过动态方式访问和处理嵌套错误以及触发formik字段的变化。
在formik中，可以通过使用formik的errors对象来访问表单字段的错误信息。对于嵌套字段，可以使用点号（.）来访问其子字段的错误信息。
以下是一种动态访问嵌套错误和触发formik字段变化的方法：
- 访问嵌套错误：
- 假设有一个表单字段
user，其中包含一个嵌套字段address。 - 要访问
address字段的错误信息，可以使用errors.user.address。 - 如果
address字段有多个子字段，可以使用点号继续访问子字段的错误信息，例如errors.user.address.street。
- 假设有一个表单字段
- 触发formik字段变化：
- formik提供了
setFieldValue方法，可以用于触发字段的变化。 - 假设要触发
user.address.street字段的变化，可以使用setFieldValue('user.address.street', value)，其中value是要设置的新值。 - 通过调用
setFieldValue方法，可以更新字段的值并触发formik的表单验证和错误处理。
- formik提供了
这种动态访问嵌套错误和触发formik字段变化的方法可以帮助开发人员在处理复杂表单时更灵活地操作和处理字段的错误和值变化。
腾讯云相关产品和产品介绍链接地址：
- 腾讯云云服务器（CVM）：https://cloud.tencent.com/product/cvm
- 腾讯云云原生容器服务（TKE）：https://cloud.tencent.com/product/tke
- 腾讯云对象存储（COS）：https://cloud.tencent.com/product/cos
- 腾讯云人工智能（AI）：https://cloud.tencent.com/product/ai
- 腾讯云物联网（IoT）：https://cloud.tencent.com/product/iotexplorer
- 腾讯云移动开发（移动推送）：https://cloud.tencent.com/product/umeng
- 腾讯云区块链（BCS）：https://cloud.tencent.com/product/bcs
- 腾讯云元宇宙（Tencent Real-Time Interactive Audio-Video）：https://cloud.tencent.com/product/trtc
相关·内容
2回答
现在我正在尝试formik (使用Yup验证)，当我有嵌套的信息时，我遇到了动态访问error和touched字段的问题。在上面的代码中，如果formik的form.errors对象上的相应字段存在(即，.存在错误)，并且form.touched对象为真(即用户已经触摸了输入)。最终，这将始终计算为false，因此输入始终为invalid=false，因此输入永远不会标记为错误样式，也不会显示错误消息。initial
浏览 5提问于2019-05-11得票数 8
回答已采纳
1回答
TL:DR 在formik中，如果我有一个以点符号编写的字段名(例如name="hands.left")，它链接到initialValues中嵌套对象的属性(例如hands: {left: " ",right: " "})，那么在使用验证错误时如何使用该字段名，也就是访问对象属性(errors.hands.left和errors["hands.left"]不起作用) 由于我的Typescri
浏览 11提问于2021-01-20得票数 0
回答已采纳
1回答
我所拥有的 我创建了一个函数，它接受一个参数，该参数将用于动态访问特定的formik错误，这是通过使用括号表示法而不是像这样的点表示法来实现的： import {useFormikContext} from我想要的 我可以看到formik实现的类型，但我不知道如何实现这个函数，该函数接受错误名称作为函数参数，并使用它来访问错误而不发出警告。 更新1 当前问题:我正在尝试使用括号表示法动态获取error。在这种情况下，
浏览 7提问于2021-05-05得票数 1
1回答
我试图同时使用Formik和Yup来验证我的用户数据，但是当我尝试访问嵌套值的错误时，比如address.line1，我得到一个错误，说它是未定义的。如何使用Formik和Yup访问嵌套值的错误？
浏览 17提问于2019-05-08得票数 1
回答已采纳
).required(), shipAddressAttributes: addressSchema, <AddressFormFields prefix="shipAddressAttributes" /></Formik> 其中<AddressForm&#x
浏览 1提问于2019-06-08得票数 5
1回答
我目前正在使用formik构建表单，但是当我在initialValues中使用嵌套对象时，就像这样：address:{title:"this a title",value:{principalAddress:"test",seconderyAddress:""}} 设置字段名称时，无法访问formik字段中的principalAdress <Field component={TextField} fullWidth
浏览 19提问于2020-07-19得票数 0
回答已采纳
我正在使用Formik和Yup构建一个带有验证的表单，发送有关缺少字段的特定错误消息。其中一个字段(问题)是和对象数组，而我找不到一种方法来访问每个单独的错误消息。我已经创建了一个validationSchema，但是当我试图在Formik error prop上传递数组索引时，我得到了一个错误。 这是一个沙箱，其中包含整个表单的抽象。在这个例子中，它只有在我注释第二个标签字段时才起作用，但在正常情况下，这必须是动态
浏览 35提问于2019-06-11得票数 0
Formik的文档指出，您可以使用lodash类型的点路径来命名/访问嵌套对象(例如name.firstName)。这也应该适用于它的内置<ErrorMessage/>组件。我正在使用一个React-Typescript教程应用程序，它使用formik作为表单输入，当与后端代码配对时，它似乎在幕后工作得很好，但我确实注意到，提供嵌套对象值的字段不会在UI中抛出任何错误。错误本身将会生成，但<ErrorMessage
浏览 0提问于2020-05-30得票数 1
我正在构建一个React组件，它从外部API调用动态加载表单数据。在用户完成之后，我需要将它提交回另一个API端点。button type="submit">Submit</button> ); API调用来了，ok (是的，我现在需要一些错误处理在我遇到麻烦的地方(我更新了Formik，所以请容忍我)，我需要做验证和提交。我真的不知道如何处理这些值，通常我会为变量编写某
浏览 2提问于2021-01-27得票数 1
回答已采纳
我第一次尝试使用formik来处理表单，我很难找出正确的方法。代码的结构是我有两个文件，一个包含实际的输入字段，另一个文件，我想要初始化状态的初始值，所有处理和API调用都将在其中发生。input field
export default CompanyProfileFormconst CompanyProfile = () => { <CompanyProfileForm />
浏览 2提问于2020-04-14得票数 0
1回答
我使用Formik和Yup进行验证，使用useFormik() hook，如下所示： initialValues,
validationSchema
浏览 6提问于2022-08-01得票数 0
1回答
我在处理来自服务器的错误时遇到了一点麻烦。</form>
但我得到了以下错误你能帮我解决这个问题吗，让我明白这个错误是关于什么的。我的意思
浏览 0提问于2019-03-18得票数 3
回答已采纳
我使用的是对Formik v ^2.2.5"的React重要部分： gmail: Yup.string() })} : "text-input"
浏览 4提问于2022-11-08得票数 0
1回答
但是我不想在发生错误的情况下显示一些错误消息，尽管我希望突出显示该字段。给出空字符串而不是错误消息会导致formik不显示红色输入字段，但验证仍会运行。
浏览 9提问于2021-08-03得票数 2
5回答
相反，我得到了一个错误：
const SomeComponent = () => (
<Formik
浏览 0提问于2018-09-11得票数 48
回答已采纳
下面是我使用React的formik表单验证代码。默认情况下，在加载表单时，我希望禁用submit按钮：import * as Yup from "yup";
但只有当我试着提交表格时，它才能起作用。因此，如果我将表单保留为空白并单击submit，则会显示所有验证错误，然后禁用该按钮。但是，它应该从一开始就被禁用。
浏览 6提问于2019-12-22得票数 51
回答已采纳
我需要用formik或yup来验证动态创建的字段，.I已经在jquery validatioh here中看到过这种验证 ? 到这个 ? file=/src/demo.js 如何使用formik和yup实现这一点？
浏览 16提问于2020-04-09得票数 3
回答已采纳
扫码
添加站长 进交流群
领取专属 10元无门槛券
手把手带您无忧上云
相关资讯
热门标签
云服务器
ICP备案
对象存储
即时通信 IM
腾讯会议活动推荐
腾讯云开发者
