点击表单提交的时候会验证Form.List和 子节点的Form.Item。前提是节点上有rules,提交的数据为数组格式。如图 自定义表单组件,在 Form.Item 组件下使用。 Form.Item子节点的props接收两个参数:value,onChange。 props 类型 描述 value any 表单对应的Form.Item上name的值。
Form.Item的name属性只有字符类型,传入数组也会转换成字符 如果加上必填校验rules={[{ required: true }]},提交就会出现 '0.gender.gender1' is required 提示,说明name被转换成了 '0.gender.gender1' 想要动态name可以添加一个state传给name,如name={this.state.fieldName},需要的时候在shouldUpdate中使用set...
我们需要的数据格式是数组对象,这时我们在getFieldDecorator要如何取名字呢? <Form.Item style={{ margin:0}}>{getFieldDecorator(`content[${index}].name`, { rules: [ { required:true, message:'请输入姓名!', }, ], initialValue:..., })(<Input />)}</Form.Item> <Form.Item style={{ margi...
如果可以的话,这样做写Form内的组件很方便。翻遍了文档,只有Form.List有这个功能,但是Form.List毕竟是做动态增删表单的,它设计的子name只能是数组,这样在某些场景就很不方便,有没有更好的办法。 <Form.List name="demo"> {()=>{ return ( <> <Form.Item label="foo" name={[0,'foo']}> <Foo/> <...
antd快速开发(Form篇) 前言 由于一直在做中台业务,后台项目特别多,但是后台项目的特点是:大量的列表和大量表单,重复开发会降低效率,所以我这边总结了一下使用antd组件搭建form的快捷方法。希望能对大家有用。 传统Form搭建 首先传统搭建一个form表单,那么代码可能会是下面这样子 ...
一、获取 form 对象 从Form.useForm() 解构出 form:const [form] = Form.useForm(); 将form 传给 <Form> 的 form 属性。 二、调用 form.setFieldsValue() 方法设置表单控件的值。 form.setFieldsValue() 方法接收一个对象,可以一次设置多个表单项的值。表单项的字段名对应 <Form.Item> 的 name 属性。
</Form.Item> </Form> ); antd在版本4.20.0中增加了Form.useWatch(name, form)方法,用来获取表单的值,当表单值发生修改,还会触发组件的刷新操作。 // field-form/src/useWatch.ts function useWatch(dependencies: NamePath = [], form?: FormInstance) { ...
antd form 在 setFieldsValue 执行之后不会触发 form 表单的验证 formik 的formik.setFieldValue('lastName', '233333333333333333333333333');可以触发验证 antd form 可以支持 Form.Item 的 name 是一个数组,然后以对象的形式收集值 <Form.Itemname={['user','name']}label="Name"rules={[{required:true}]}...
例如表单存在一个formList 数据结构如下fields:[{name:'第一个'},{name:'第二个'}] setFields[{}] 会直接把整个数组替换 结果就是fields:[{}] setFieldsValue[{}] 只会找到数组的第0个替换。结果是fields:[{},{name:'第二个'}] 清空了但是只清空了一点点...
</FormItemPrefixContext.Provider> ); 1. 2. 3. 4. 5. 6. 7. 8. 9. 再聊聊几个参数组合使用的禁忌 shouldUpdate与dependencies不可以同时使用。 如果Item里面的 children 是数组,则不能使用 name。 如果children 是 renderProps,则必须跟 shouldUpdate 或者 dependencies 组合使用。同时 Field 不能使用 name...