mirror of
https://gitee.com/ant-design/ant-design.git
synced 2024-11-30 02:59:04 +08:00
chore: Fix Form.List render logic (#24009)
* update snapshot * update nest logic * clean up
This commit is contained in:
二货机器人
GitHub
parent
741ff5c3bb
commit
72a846681a
@ -46,7 +46,7 @@ export interface FormItemProps extends FormItemLabelProps, FormItemInputProps, R
|
||||
required?: boolean;
|
||||
|
||||
/** Auto passed by List render props. User should not use this. */
|
||||
fieldKey?: number;
|
||||
fieldKey?: React.Key | React.Key[];
|
||||
}
|
||||
|
||||
function hasValidName(name?: NamePath): Boolean {
|
||||
@ -191,6 +191,7 @@ function FormItem(props: FormItemProps): React.ReactElement {
|
||||
'htmlFor',
|
||||
'id', // It is deprecated because `htmlFor` is its replacement.
|
||||
'initialValue',
|
||||
'isListField',
|
||||
'label',
|
||||
'labelAlign',
|
||||
'labelCol',
|
||||
@ -255,7 +256,8 @@ function FormItem(props: FormItemProps): React.ReactElement {
|
||||
if (noStyle) {
|
||||
nameRef.current = [...mergedName];
|
||||
if (fieldKey) {
|
||||
nameRef.current[nameRef.current.length - 1] = fieldKey;
|
||||
const fieldKeys = Array.isArray(fieldKey) ? fieldKey : [fieldKey];
|
||||
nameRef.current = [...mergedName.slice(-1), ...fieldKeys];
|
||||
}
|
||||
updateItemErrors(nameRef.current.join('__SPLIT__'), errors);
|
||||
}
|
||||
|
||||
@ -1012,6 +1012,89 @@ exports[`renders ./components/form/demo/dynamic-form-item.md correctly 1`] = `
|
||||
</form>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/form/demo/dynamic-form-items.md correctly 1`] = `
|
||||
<form
|
||||
autocomplete="off"
|
||||
class="ant-form ant-form-horizontal"
|
||||
id="dynamic_form_nest_item"
|
||||
>
|
||||
<div>
|
||||
<div
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-dashed ant-btn-block"
|
||||
type="button"
|
||||
>
|
||||
<span
|
||||
aria-label="plus"
|
||||
class="anticon anticon-plus"
|
||||
role="img"
|
||||
>
|
||||
<svg
|
||||
aria-hidden="true"
|
||||
class=""
|
||||
data-icon="plus"
|
||||
fill="currentColor"
|
||||
focusable="false"
|
||||
height="1em"
|
||||
viewBox="64 64 896 896"
|
||||
width="1em"
|
||||
>
|
||||
<defs />
|
||||
<path
|
||||
d="M482 152h60q8 0 8 8v704q0 8-8 8h-60q-8 0-8-8V160q0-8 8-8z"
|
||||
/>
|
||||
<path
|
||||
d="M176 474h672q8 0 8 8v60q0 8-8 8H176q-8 0-8-8v-60q0-8 8-8z"
|
||||
/>
|
||||
</svg>
|
||||
</span>
|
||||
<span>
|
||||
Add field
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
<div
|
||||
class="ant-row ant-form-item"
|
||||
>
|
||||
<div
|
||||
class="ant-col ant-form-item-control"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input"
|
||||
>
|
||||
<div
|
||||
class="ant-form-item-control-input-content"
|
||||
>
|
||||
<button
|
||||
class="ant-btn ant-btn-primary"
|
||||
type="submit"
|
||||
>
|
||||
<span>
|
||||
Submit
|
||||
</span>
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</form>
|
||||
`;
|
||||
|
||||
exports[`renders ./components/form/demo/dynamic-rule.md correctly 1`] = `
|
||||
<form
|
||||
class="ant-form ant-form-horizontal"
|
||||
|
||||
@ -7,11 +7,11 @@ title:
|
||||
|
||||
## zh-CN
|
||||
|
||||
动态增加、减少表单项。如果需要动态支持多项字段时，可以参考[此处](https://codesandbox.io/s/wonderful-lichterman-br63z)。
|
||||
动态增加、减少表单项。
|
||||
|
||||
## en-US
|
||||
|
||||
Add or remove form items dynamically. You can ref [this example](https://codesandbox.io/s/wonderful-lichterman-br63z) if you want to support mutiple fields.
|
||||
Add or remove form items dynamically.
|
||||
|
||||
```jsx
|
||||
import { Form, Input, Button } from 'antd';
|
||||
|
||||
84
components/form/demo/dynamic-form-items.md
Normal file
84
components/form/demo/dynamic-form-items.md
Normal file
@ -0,0 +1,84 @@
|
||||
---
|
||||
order: 4.1
|
||||
title:
|
||||
zh-CN: 动态增减嵌套字段
|
||||
en-US: Dynamic Form nest Items
|
||||
---
|
||||
|
||||
## zh-CN
|
||||
|
||||
嵌套表单字段需要对 `field` 进行拓展，将 `field.name` 和 `field.fieldKey` 应用于控制字段。
|
||||
|
||||
## en-US
|
||||
|
||||
Nest dynamic field need extends `field`. Pass `field.name` and `field.fieldKey` to nest item.
|
||||
|
||||
```jsx
|
||||
import { Form, Input, Button, Space } from 'antd';
|
||||
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
|
||||
|
||||
const Demo = () => {
|
||||
const onFinish = values => {
|
||||
console.log('Received values of form:', values);
|
||||
};
|
||||
|
||||
return (
|
||||
<Form name="dynamic_form_nest_item" onFinish={onFinish} autoComplete="off">
|
||||
<Form.List name="users">
|
||||
{(fields, { add, remove }) => {
|
||||
return (
|
||||
<div>
|
||||
{fields.map(field => (
|
||||
<Space key={field.key} style={{ display: 'flex', marginBottom: 8 }} align="start">
|
||||
<Form.Item
|
||||
{...field}
|
||||
name={[field.name, 'first']}
|
||||
fieldKey={[field.fieldKey, 'first']}
|
||||
rules={[{ required: true, message: 'Missing first name' }]}
|
||||
>
|
||||
<Input placeholder="First Name" />
|
||||
</Form.Item>
|
||||
<Form.Item
|
||||
{...field}
|
||||
name={[field.name, 'last']}
|
||||
fieldKey={[field.fieldKey, 'last']}
|
||||
rules={[{ required: true, message: 'Missing last name' }]}
|
||||
>
|
||||
<Input placeholder="Last Name" />
|
||||
</Form.Item>
|
||||
|
||||
<MinusCircleOutlined
|
||||
onClick={() => {
|
||||
remove(field.name);
|
||||
}}
|
||||
/>
|
||||
</Space>
|
||||
))}
|
||||
|
||||
<Form.Item>
|
||||
<Button
|
||||
type="dashed"
|
||||
onClick={() => {
|
||||
add();
|
||||
}}
|
||||
block
|
||||
>
|
||||
<PlusOutlined /> Add field
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</div>
|
||||
);
|
||||
}}
|
||||
</Form.List>
|
||||
|
||||
<Form.Item>
|
||||
<Button type="primary" htmlType="submit">
|
||||
Submit
|
||||
</Button>
|
||||
</Form.Item>
|
||||
</Form>
|
||||
);
|
||||
};
|
||||
|
||||
ReactDOM.render(<Demo />, mountNode);
|
||||
```
|
||||
@ -119,7 +119,7 @@
|
||||
"rc-dialog": "~7.7.0",
|
||||
"rc-drawer": "~3.2.0",
|
||||
"rc-dropdown": "~3.0.0",
|
||||
"rc-field-form": "~1.3.0",
|
||||
"rc-field-form": "~1.4.0",
|
||||
"rc-input-number": "~4.6.1",
|
||||
"rc-mentions": "~1.1.0",
|
||||
"rc-menu": "~8.1.0",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user