首页
学习
活动
专区
工具
TVP
发布
精选内容/技术社群/优惠产品,尽在小程序
立即前往

Ant design 4验证数组中的表单项

Ant Design 是一个由蚂蚁金服开发和维护的企业级UI设计语言和React组件库,它具有美观、实用和可定制的特点。Ant Design 提供了一系列丰富的表单组件和验证机制,可以用于验证数组中的表单项。在 Ant Design 4 中,可以使用 Form 组件和自定义校验规则来实现这个功能。

首先,我们需要使用 Form 组件来创建一个表单,并在表单中使用 FieldArray 组件来渲染数组字段。FieldArray 组件会遍历数组字段,并根据指定的模板组件来渲染每个表单项。例如,我们可以使用 Input 组件来渲染文本输入框。

在验证数组中的表单项时,我们可以在 FieldArray 组件中的模板组件中定义校验规则。可以使用 Ant Design 提供的内置校验规则,如 required(必填项)、pattern(正则表达式匹配)等,也可以自定义校验规则。

以下是一个示例代码:

代码语言:txt
复制
import { Form, Input, Button } from 'antd';
import { FieldArray } from 'formik';

const MyForm = () => {
  const validateItem = (value) => {
    let error;
    if (!value) {
      error = '必填项';
    }
    return error;
  };

  return (
    <Form>
      <FieldArray name="items">
        {({ push, remove }) => (
          <div>
            {values.items.map((item, index) => (
              <div key={index}>
                <Form.Item
                  name={`items[${index}]`}
                  validateTrigger={['onChange', 'onBlur']}
                  rules={[{ validator: validateItem }]}
                >
                  <Input placeholder="请输入内容" />
                </Form.Item>
                <Button onClick={() => remove(index)}>删除</Button>
              </div>
            ))}
            <Button onClick={() => push('')}>添加</Button>
          </div>
        )}
      </FieldArray>
      <Button type="primary" htmlType="submit">提交</Button>
    </Form>
  );
};

export default MyForm;

在上述示例中,我们使用 FieldArray 组件来渲染名为 "items" 的数组字段。对于每个表单项,我们使用 Form.Item 组件来包裹 Input 组件,并通过设置 name 属性来关联表单项的值与表单数据的对应字段。同时,我们设置了校验触发方式为 onChange 和 onBlur,并通过 rules 属性定义了校验规则。

当用户输入表单时,表单项的值会自动与表单数据保持同步。如果用户输入无效的值,如为空或不符合校验规则,Ant Design 会自动展示错误信息。用户可以通过点击删除按钮来删除某个表单项,也可以点击添加按钮来动态地添加表单项。

以上是利用 Ant Design 4 验证数组中的表单项的方法。如果你需要更详细的使用说明和示例代码,可以参考Ant Design 表单组件Ant Design FieldArray的官方文档。

页面内容是否对你有帮助?
有帮助
没帮助

相关·内容

  • 从 ant design 中,学一手复杂组件交互的最佳实践

    React 知命境第 44 篇,原创第 158 篇 我们在学习的时候遇到的 Demo 经常都是比较简单的,但是一旦到了实践工作中,数据和功能就开始变得复杂了。...这个时候许多小伙伴就不知道咋处理了,他可能会把组件写的非常庞大。不利于维护 我们可以在 antd 中,学习一手最佳实践,如何把复杂的组件转化为简单的组件。 例如我们有这样一个复杂交互需求。...这是一个树结构与输入框结合的交互逻辑 Input + Tree 在 antd 中,这样的交互被封装成为了一个单独的子组件 TreeSelect。...但是其实我们可能只是需要从 onChange 中获取到当前选中的结果,然后将这个结果整合到接口参数中去提交表单。...只有当 TreeSelect 中的交互结果,会影响到其他外部组件时,我们才会考虑使用受控组件。

    24310

    结合Ant Design2.x总结在实际项目开发中遇到的问题

    1.Ant Design 1. 介绍 2. 设计价值观 https://ant.design/docs/spec/... 2.使用的问题和解决方法 1....,key是你在使用Form时通过getFieldDecorator 方法与表单进行双向绑定时的参数id,详见ant文档中的Form使用方法 帮我们保存很好,但是当我们点击删除时会不会出现什么问题?...其实表单中的数据并没有被删除 只是没有缺少key去承接最后一个value而已 解决办法有两种: 一种是删除时手动将form中的key也向上移动一位,例如:删除第一项,写一个方法将Flows0_name赋值为...2,Flows1_name赋值为3,Flows2_name赋值为4 以此类推......另一种是给数组中的每一项都增加一个flow_flag作为这一项的唯一id,例如:在点击add时,向数组中push一条初始数据时同时将flow_flag push进去, 这种方法“1对1”“1对n”删都可以

    1K20

    JeecgBoot 3.4.2 版本发布,Vue3版本大升级

    前后端分离架构 SpringBoot2.x,SpringCloud,Ant Design&Vue,Mybatis-plus,Shiro,JWT 支持微服务。强大的代码生成器让前后端代码一键生成!....ant-tabs-bar —> .ant-tabs-nav下拉类型的SelectTypes更名为SelectValue更多升级日志见 从 ant-design-vue 2.x 版本升级到 ant-design-vue...issues/I5ITL3vue3版本中,online报表 动态参数设置无效issues/I5HB7P主附表启用联合查询后导入有问题issues/111JVxeTable中的inputNumber不能输入小数...采用最新主流前后分离框架(SpringBoot+Mybatis-plus+Ant-Design+Vue),容易上手; 代码生成器依赖性低,灵活的扩展能力,可灵活实现二次开发;开发效率很高,采用代码生成器...目前提供四套风格模板(单表两套、一对多两套)封装完善的用户、角色、菜单、组织机构、数据字典、在线定时任务等基础功能。

    2.1K30

    ant design vue pro admin菜单如果是外链,点击新标签页打开

    在Ant Design Vue Pro(Ant Design Pro for Vue)中,要实现菜单项点击后在新标签页打开外链,您通常需要在配置菜单时指定链接(​​href​​)并设置特定属性来控制打开方式...假设您是在使用ProLayout组件进行菜单配置,并且某个菜单项是一个外部链接,那么可以在路由配置或者menuData中按照以下方式进行设置: // 菜单数据示例 const menuData = [...]; // 在Ant Design Pro Vue中可能通过layout组件传递给ProLayout // ......:menuData="menuData" 在HTML标准中,​​target="_blank"​​​ 属性会让链接在新的浏览器窗口或标签页中打开。...当您将此属性应用到菜单项的​​href​​属性上时,点击该菜单就会在新标签页中打开指定的外部链接了。 在JSX中,您可以根据上述逻辑编写一个返回元素的函数或直接在组件render方法中处理。

    20100

    【第4期】JS数组中的indexOf方法

    前言 这两天在家中帮朋友做项目,项目中使用了数组的indexOf 方法,找到了一篇文章,感觉非常不错,顺便整理下以防链接丢失。...array 类型的使用 大家提起精神,大boss来了。 数组方法大家再熟悉不过了,却忽略了数组有 indexOf 这个方法(我个人感觉)。 干说不练瞎扯淡,遇到了什么问题,注意要点又在哪里?...arr.indexOf(‘orange')输出 0 因为 ‘orange' 是数组的第 0 个元素,匹配到并返回下标。...arr.indexOf(‘2016') 输出 1 因为此方法从头匹配直到匹配到时返回第一个数组元素的下表,而不是返回全部匹配的下标。...Array:数组同样有indexOf 方法,只不过做类型判断时,使用的严格相等(strict equality),也就是 === 。 (完)

    2.1K10

    Mock21-接口数据管理实现

    其中用了antd的高级组件protable,本篇我们在使用高级系列组件中的 ProForm +抽屉(Drawer)弹窗的方式来快速实现接口增改操作。...关于ProFrom高级表单一段官方说明 https://procomponents.ant.design/components/form 与其配合还有一系列封装子组件 ProFormFields 表单项...https://procomponents.ant.design/components/field-set 回到功能本功能实现上 在 protable 通过 toolBarRender 增加自定义按钮...因表单项很多,同样根据之前的学习的自定义Component实现一个自定义独立组件 截图只展示了表单部分代码,全部的实现代码直接参考本项目源码 chapter21 分支代码 前后端伪代码的逻辑 实现新增和修改的统一接口...; 因ProForm和DrawerForm都有默认提交按钮,此处选择了后者,个人实现中根据设计规范可自行选择保留其一; 注意之前篇章中升级过antd,所以新的js接口统一放到\services\ant-design-pro

    10310

    最熟悉的陌生人 rc-form

    但是我们可能会忽略掉在这些优秀的第三方库中的某些组件可能也依赖于其他优秀的库!正如我们使用频率很高的 Ant Design 中的 Form 组件(这里我说的是 React 版本的)。...(就是 Ant Design 中 Form 的 create( ) 方法),会自动向组件没注入 form 对象,组件本身也就拥有了这些 Api。...其实还是需要我们自己了解 rc-form 的设计思路的;只有了解了这些优秀开源作品的精髓,我们即使不用开源库,也可以封装自己的代码库以及类似 Ant Design 中 Form 这些优秀的组件的。...那么也就清楚了 Ant Design 的 Form.create() 方法就是 rc-form 中的 createBaseForm 方法的替代!...当然,我说的是 Ant Design 4.0 以前的版本, 那么我们就先从这里开始看起。

    1.1K20

    扒个知名项目的 Bug!

    正好我昨天遇到了个 Bug,就给大家分享一个不错的 Bug 排查思路吧~ Bug 排查之旅 这是一个关于前端 Ant Design 组件库的 Bug。 本文大纲: ?...Bug 排查之旅 孽起 我有一个前端项目,使用到了 Ant Design 组件库,昨天打开它的官方文档,发现竟然又更新了那么多版本,出了一些新的特性、做了些优化、修了些 Bug 什么的。...缺失代码如下: .ant-menu-item-active { color: #1890ff; } 原本当鼠标悬停到菜单项时,会自动为该元素添加 xx-active 类名,然后触发上述样式代码变蓝色...Ant Design Issues 咱也有样学样提一个 issue,Ant Design 团队为了管理大家的问题,提供了一个问题表单页面,并且给你定好了一些规矩,避免一些乱七八糟不经搜索就直接提出的低质量问题...Ant Design Issue 创建页 提交完毕,就能看到自己创建的 issue 了,可以再打个小勾,表示自己已经确认没有其他同学问过重复的问题。 ?

    71030
    领券