2022-11-09 12:28:04 +08:00
|
|
|
import React from 'react';
|
|
|
|
import { MinusCircleOutlined, PlusOutlined } from '@ant-design/icons';
|
|
|
|
import { Button, Form, Input } from 'antd';
|
|
|
|
|
|
|
|
const formItemLayout = {
|
|
|
|
labelCol: {
|
|
|
|
xs: { span: 24 },
|
|
|
|
sm: { span: 4 },
|
|
|
|
},
|
|
|
|
wrapperCol: {
|
|
|
|
xs: { span: 24 },
|
|
|
|
sm: { span: 20 },
|
|
|
|
},
|
|
|
|
};
|
2023-01-19 15:37:54 +08:00
|
|
|
|
2022-11-09 12:28:04 +08:00
|
|
|
const formItemLayoutWithOutLabel = {
|
|
|
|
wrapperCol: {
|
|
|
|
xs: { span: 24, offset: 0 },
|
|
|
|
sm: { span: 20, offset: 4 },
|
|
|
|
},
|
|
|
|
};
|
|
|
|
|
|
|
|
const App: React.FC = () => {
|
|
|
|
const onFinish = (values: any) => {
|
|
|
|
console.log('Received values of form:', values);
|
|
|
|
};
|
|
|
|
|
|
|
|
return (
|
2023-01-19 15:37:54 +08:00
|
|
|
<Form
|
|
|
|
name="dynamic_form_item"
|
|
|
|
{...formItemLayoutWithOutLabel}
|
|
|
|
onFinish={onFinish}
|
|
|
|
style={{ maxWidth: 600 }}
|
|
|
|
>
|
2022-11-09 12:28:04 +08:00
|
|
|
<Form.List
|
|
|
|
name="names"
|
|
|
|
rules={[
|
|
|
|
{
|
|
|
|
validator: async (_, names) => {
|
|
|
|
if (!names || names.length < 2) {
|
|
|
|
return Promise.reject(new Error('At least 2 passengers'));
|
|
|
|
}
|
|
|
|
},
|
|
|
|
},
|
|
|
|
]}
|
|
|
|
>
|
|
|
|
{(fields, { add, remove }, { errors }) => (
|
|
|
|
<>
|
|
|
|
{fields.map((field, index) => (
|
|
|
|
<Form.Item
|
|
|
|
{...(index === 0 ? formItemLayout : formItemLayoutWithOutLabel)}
|
|
|
|
label={index === 0 ? 'Passengers' : ''}
|
|
|
|
required={false}
|
|
|
|
key={field.key}
|
|
|
|
>
|
|
|
|
<Form.Item
|
|
|
|
{...field}
|
|
|
|
validateTrigger={['onChange', 'onBlur']}
|
|
|
|
rules={[
|
|
|
|
{
|
|
|
|
required: true,
|
|
|
|
whitespace: true,
|
|
|
|
message: "Please input passenger's name or delete this field.",
|
|
|
|
},
|
|
|
|
]}
|
|
|
|
noStyle
|
|
|
|
>
|
|
|
|
<Input placeholder="passenger name" style={{ width: '60%' }} />
|
|
|
|
</Form.Item>
|
|
|
|
{fields.length > 1 ? (
|
|
|
|
<MinusCircleOutlined
|
|
|
|
className="dynamic-delete-button"
|
|
|
|
onClick={() => remove(field.name)}
|
|
|
|
/>
|
|
|
|
) : null}
|
|
|
|
</Form.Item>
|
|
|
|
))}
|
|
|
|
<Form.Item>
|
|
|
|
<Button
|
|
|
|
type="dashed"
|
|
|
|
onClick={() => add()}
|
|
|
|
style={{ width: '60%' }}
|
|
|
|
icon={<PlusOutlined />}
|
|
|
|
>
|
|
|
|
Add field
|
|
|
|
</Button>
|
|
|
|
<Button
|
|
|
|
type="dashed"
|
|
|
|
onClick={() => {
|
|
|
|
add('The head item', 0);
|
|
|
|
}}
|
|
|
|
style={{ width: '60%', marginTop: '20px' }}
|
|
|
|
icon={<PlusOutlined />}
|
|
|
|
>
|
|
|
|
Add field at head
|
|
|
|
</Button>
|
|
|
|
<Form.ErrorList errors={errors} />
|
|
|
|
</Form.Item>
|
|
|
|
</>
|
|
|
|
)}
|
|
|
|
</Form.List>
|
|
|
|
<Form.Item>
|
|
|
|
<Button type="primary" htmlType="submit">
|
|
|
|
Submit
|
|
|
|
</Button>
|
|
|
|
</Form.Item>
|
|
|
|
</Form>
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
export default App;
|