test/ant-design
1
0
Fork 0
mirror of https://gitee.com/ant-design/ant-design.git synced 2024-11-30 02:59:04 +08:00
Code Issues Actions 68 Packages Projects Releases Wiki Activity

feat: Form support validateOnly (#42273)

Browse Source 
* feat: support validateOnly

* test: update snapshot
This commit is contained in:
二货爱吃白萝卜 2023-05-11 15:43:00 +08:00 committed by GitHub
parent c76d9fe4f4
commit 0ead943e1e
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
7 changed files with 332 additions and 3 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

135
components/form/__tests__/__snapshots__/demo-extend.test.ts.snap
View File

@ -19046,6 +19046,141 @@ Array [
]
`;
exports[`renders components/form/demo/validate-only.tsx extend context correctly 1`] = `
<form
autocomplete="off"
class="ant-form ant-form-vertical"
id="validateOnly"
>
<div
class="ant-form-item"
>
<div
class="ant-row ant-form-item-row"
>
<div
class="ant-col ant-form-item-label"
>
<label
class="ant-form-item-required"
for="validateOnly_name"
title="Name"
>
Name
</label>
</div>
<div
class="ant-col ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<input
aria-required="true"
class="ant-input"
id="validateOnly_name"
type="text"
value=""
/>
</div>
</div>
</div>
</div>
</div>
<div
class="ant-form-item"
>
<div
class="ant-row ant-form-item-row"
>
<div
class="ant-col ant-form-item-label"
>
<label
class="ant-form-item-required"
for="validateOnly_age"
title="Age"
>
Age
</label>
</div>
<div
class="ant-col ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<input
aria-required="true"
class="ant-input"
id="validateOnly_age"
type="text"
value=""
/>
</div>
</div>
</div>
</div>
</div>
<div
class="ant-form-item"
>
<div
class="ant-row ant-form-item-row"
>
<div
class="ant-col ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<div
class="ant-space ant-space-horizontal ant-space-align-center"
>
<div
class="ant-space-item"
style="margin-right: 8px;"
>
<button
class="ant-btn ant-btn-primary"
disabled=""
type="submit"
>
<span>
Submit
</span>
</button>
</div>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default"
type="reset"
>
<span>
Reset
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
`;
exports[`renders components/form/demo/validate-other.tsx extend context correctly 1`] = `
<form
class="ant-form ant-form-horizontal"

135
components/form/__tests__/__snapshots__/demo.test.tsx.snap
View File

@ -8104,6 +8104,141 @@ Array [
]
`;
exports[`renders components/form/demo/validate-only.tsx correctly 1`] = `
<form
autocomplete="off"
class="ant-form ant-form-vertical"
id="validateOnly"
>
<div
class="ant-form-item"
>
<div
class="ant-row ant-form-item-row"
>
<div
class="ant-col ant-form-item-label"
>
<label
class="ant-form-item-required"
for="validateOnly_name"
title="Name"
>
Name
</label>
</div>
<div
class="ant-col ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<input
aria-required="true"
class="ant-input"
id="validateOnly_name"
type="text"
value=""
/>
</div>
</div>
</div>
</div>
</div>
<div
class="ant-form-item"
>
<div
class="ant-row ant-form-item-row"
>
<div
class="ant-col ant-form-item-label"
>
<label
class="ant-form-item-required"
for="validateOnly_age"
title="Age"
>
Age
</label>
</div>
<div
class="ant-col ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<input
aria-required="true"
class="ant-input"
id="validateOnly_age"
type="text"
value=""
/>
</div>
</div>
</div>
</div>
</div>
<div
class="ant-form-item"
>
<div
class="ant-row ant-form-item-row"
>
<div
class="ant-col ant-form-item-control"
>
<div
class="ant-form-item-control-input"
>
<div
class="ant-form-item-control-input-content"
>
<div
class="ant-space ant-space-horizontal ant-space-align-center"
>
<div
class="ant-space-item"
style="margin-right:8px"
>
<button
class="ant-btn ant-btn-primary"
disabled=""
type="submit"
>
<span>
Submit
</span>
</button>
</div>
<div
class="ant-space-item"
>
<button
class="ant-btn ant-btn-default"
type="reset"
>
<span>
Reset
</span>
</button>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</form>
`;
exports[`renders components/form/demo/validate-other.tsx correctly 1`] = `
<form
class="ant-form ant-form-horizontal"

7
components/form/demo/validate-only.md Normal file
View File

@ -0,0 +1,7 @@
## zh-CN
通过 `validateFields` 的 `validateOnly` 可以动态调整提交按钮的 `disabled` 状态。
## en-US
Dynamic adjust submit button's `disabled` status by `validateOnly` of `validateFields`.

50
components/form/demo/validate-only.tsx Normal file
View File

@ -0,0 +1,50 @@
import type { FormInstance } from 'antd';
import { Button, Form, Input, Space } from 'antd';
import React from 'react';
const SubmitButton = ({ form }: { form: FormInstance }) => {
const [submittable, setSubmittable] = React.useState(false);
// Watch all values
const values = Form.useWatch([], form);
React.useEffect(() => {
form.validateFields({ validateOnly: true }).then(
() => {
setSubmittable(true);
},
() => {
setSubmittable(false);
},
);
}, [values]);
return (
<Button type="primary" htmlType="submit" disabled={!submittable}>
Submit
</Button>
);
};
const App = () => {
const [form] = Form.useForm();
return (
<Form form={form} name="validateOnly" layout="vertical" autoComplete="off">
<Form.Item name="name" label="Name" rules={[{ required: true }]}>
<Input />
</Form.Item>
<Form.Item name="age" label="Age" rules={[{ required: true }]}>
<Input />
</Form.Item>
<Form.Item>
<Space>
<SubmitButton form={form} />
<Button htmlType="reset">Reset</Button>
</Space>
</Form.Item>
</Form>
);
};
export default App;

3
components/form/index.en-US.md
View File

@ -26,6 +26,7 @@ High performance Form component with data scope management. Including data colle
<code src="./demo/layout-can-wrap.tsx">label can wrap</code>
<code src="./demo/warning-only.tsx">No block rule</code>
<code src="./demo/useWatch.tsx">Watch Hooks</code>
<code src="./demo/validate-only.tsx">Validate Only</code>
<code src="./demo/form-item-path.tsx">Path Prefix</code>
<code src="./demo/dynamic-form-item.tsx">Dynamic Form Item</code>
<code src="./demo/dynamic-form-items.tsx">Dynamic Form nest Items</code>
@ -296,7 +297,7 @@ Provide linkage between forms. If a sub form with `name` prop update, it will au
| setFieldValue | Set fields value(Will directly pass to form store. If you do not want to modify passed object, please clone first) | (name: [NamePath](#namepath), value: any) => void | 4.22.0 |
| setFieldsValue | Set fields value(Will directly pass to form store. If you do not want to modify passed object, please clone first). Use `setFieldValue` instead if you want to only config single value in Form.List | (values) => void | |
| submit | Submit the form. It's same as click `submit` button | () => void | |
| validateFields | Validate fields | (nameList?: [NamePath](#namepath)\[]) => Promise | |
| validateFields | Validate fields | (nameList?: [NamePath](#namepath)\[], { validateOnly?: boolean }) => Promise | `validateOnly`: 5.5.0 |
#### validateFields return sample

3
components/form/index.zh-CN.md
View File

@ -27,6 +27,7 @@ coverDark: https://mdn.alipayobjects.com/huamei_7uahnr/afts/img/A*ylFATY6w-ygAAA
<code src="./demo/layout-can-wrap.tsx">表单标签可换行</code>
<code src="./demo/warning-only.tsx">非阻塞校验</code>
<code src="./demo/useWatch.tsx">字段监听 Hooks</code>
<code src="./demo/validate-only.tsx">仅校验</code>
<code src="./demo/form-item-path.tsx">字段路径前缀</code>
<code src="./demo/dynamic-form-item.tsx">动态增减表单项</code>
<code src="./demo/dynamic-form-items.tsx">动态增减嵌套字段</code>
@ -295,7 +296,7 @@ Form.List 渲染表单相关操作函数。
| setFieldValue | 设置表单的值（该值将直接传入 form store 中。如果你不希望传入对象被修改，请克隆后传入） | (name: [NamePath](#namepath), value: any) => void | 4.22.0 |
| setFieldsValue | 设置表单的值（该值将直接传入 form store 中。如果你不希望传入对象被修改，请克隆后传入）。如果你只想修改 Form.List 中单项值，请通过 `setFieldValue` 进行指定 | (values) => void | |
| submit | 提交表单，与点击 `submit` 按钮效果相同 | () => void | |
| validateFields | 触发表单验证 | (nameList?: [NamePath](#namepath)\[]) => Promise | |
| validateFields | 触发表单验证 | (nameList?: [NamePath](#namepath)\[], { validateOnly?: boolean }) => Promise | `validateOnly`: 5.5.0 |
#### validateFields 返回示例

2
package.json
View File

@ -126,7 +126,7 @@
"rc-dialog": "~9.1.0",
"rc-drawer": "~6.1.1",
"rc-dropdown": "~4.1.0",
"rc-field-form": "~1.30.0",
"rc-field-form": "~1.31.0",
"rc-image": "~5.16.0",
"rc-input": "~1.0.4",
"rc-input-number": "~7.4.0",