mirror of
https://github.com/ant-design/ant-design.git
synced 2025-01-09 13:28:20 +08:00
60771a0f61
* feat: support requreidMarkType * docs: Update doc desc * fix lint * use requiredMark instead * not change className * fix ts * update test case * rtl style * fix rtl Co-authored-by: xrkffgg <xrkffgg@vip.qq.com>
58 lines
1.4 KiB
Markdown
58 lines
1.4 KiB
Markdown
---
|
|
order: 3.1
|
|
title:
|
|
zh-CN: 必选样式
|
|
en-US: Required style
|
|
---
|
|
|
|
## zh-CN
|
|
|
|
通过 `requiredMark` 切换必选与可选样式。
|
|
|
|
## en-US
|
|
|
|
Switch required or optional style with `requiredMark`.
|
|
|
|
```tsx
|
|
import React, { useState } from 'react';
|
|
import { Form, Input, Button, Radio } from 'antd';
|
|
|
|
const FormLayoutDemo = () => {
|
|
const [form] = Form.useForm();
|
|
const [requiredMark, setRequiredMarkType] = useState<boolean | 'optional'>('optional');
|
|
|
|
const onRequiredTypeChange = ({ requiredMark }) => {
|
|
setRequiredMarkType(requiredMark);
|
|
};
|
|
|
|
return (
|
|
<Form
|
|
form={form}
|
|
layout="vertical"
|
|
initialValues={{ requiredMark }}
|
|
onValuesChange={onRequiredTypeChange}
|
|
requiredMark={requiredMark}
|
|
>
|
|
<Form.Item label="Required Mark" name="requiredMark">
|
|
<Radio.Group>
|
|
<Radio.Button value="optional">Optional</Radio.Button>
|
|
<Radio.Button value={true}>Required</Radio.Button>
|
|
<Radio.Button value={false}>Hidden</Radio.Button>
|
|
</Radio.Group>
|
|
</Form.Item>
|
|
<Form.Item label="Field A" required>
|
|
<Input placeholder="input placeholder" />
|
|
</Form.Item>
|
|
<Form.Item label="Field B">
|
|
<Input placeholder="input placeholder" />
|
|
</Form.Item>
|
|
<Form.Item>
|
|
<Button type="primary">Submit</Button>
|
|
</Form.Item>
|
|
</Form>
|
|
);
|
|
};
|
|
|
|
ReactDOM.render(<FormLayoutDemo />, mountNode);
|
|
```
|