怎么找网站做公示,成都购房登记入口官网,网站seo优化培训,怎样给网站做备案项目需求#xff1a; 在使用ant design form动态增减表单项Form.List时#xff0c;Form.List中有多组表单项#xff0c;一组中的最后一个表单项的校验规则是动态的#xff0c;该组为最后一组时#xff0c;最后一个表单项是非必填项#xff0c;其他时候为必填项。假设动态… 项目需求 在使用ant design form动态增减表单项Form.List时Form.List中有多组表单项一组中的最后一个表单项的校验规则是动态的该组为最后一组时最后一个表单项是非必填项其他时候为必填项。假设动态增加了两组表单项均为填写内容在必填项校验被触发后删除了第二组表单项此时仅剩一组表单项想要最后一个表单项的校验状态不再显示必填项提示。如下图所示 想要的效果最后一个表单项不显示必填项提示 解决思路 使用动态校验规则获取到最后一组的索引使用form.validateFields重新触发校验规则。 代码如下
import React, { useState } from react;
import { Form } from antd;const App () {const [lastIndex, setLastIndex] useState(false); // form表单最后一组数据的索引const [form] Form.useForm();useEffect(() {// 减少表单项时重新触发表单验证使form最后一组中最后一个表单项的验证状态不再显示必填项提示form.validateFields([[configs, lastIndex, lastFormOption]]);}, [lastIndex, form]);return (Form form{form} initialValues{{ configs: [{}] }} ……Form.List nameconfigs{(fields, { add, remove }) ({fields.map(({ key, name, ...restField }, index) {// 这里获取最后一组表单项索引setLastIndex(fields.length - 1);return (Rowkey{key}……Col span{5}Form.Item{...restField}name{[name, lastFormOption]}rules{[{required: (fields.length - 1) index ? false : true,message: 请选择……,},]}Selectoptions{options}disabled{(fields.length - 1) index}placeholder最后一条自定义条件为非必填项//Form.Item/ColCol span{2}MinusCircleOutlined onClick{() remove(name)} //Col/Row)})}Form.Item Button typedashed onClick{() add()} block icon{PlusOutlined /}新增/Button/Form.Item/)}/Form.List/Form);
};
export default App; 上述解决方式中如果App作为一个子组件用到了ForwardRef会出现下面的告警 Warning: Cannot update a component (ForwardRef(AddRemoveFormItems)) while rendering a different component (Field). To locate the bad setState() call inside Field, follow the stack trace as described…… 解决方案去掉setLastIndex(fields.length - 1);等相关代码将规则校验放在删除表单组的操作中。代码如下
MinusCircleOutlined style{{ fontSize: 24 }} onClick{() {remove(name);form.validateFields();
}} /
