mirror of
https://github.com/ant-design/ant-design.git
synced 2025-06-12 04:13:13 +08:00
docs: Form onFinish & getFieldsValue only get validate Field values (#21323)
* update faq * clean up * update faq
This commit is contained in:
二货机器人
GitHub
parent
ef36e17bb6
commit
b35f30e17a
@ -130,5 +130,5 @@ describe('Badge', () => {
|
||||
</>,
|
||||
);
|
||||
expect(wrapper).toMatchSnapshot();
|
||||
})
|
||||
});
|
||||
});
|
||||
|
||||
@ -177,7 +177,7 @@ Provide linkage between forms. If a sub form with `name` prop update, it will au
|
||||
| Name | Description | Type |
|
||||
| --- | --- | --- |
|
||||
| getFieldValue | Get the value by the field name | (name: [NamePath](#NamePath)) => any |
|
||||
| getFieldsValue | Get values by a set of field names. Return according to the corresponding structure | (nameList?: [NamePath](#NamePath)[]) => any |
|
||||
| getFieldsValue | Get values by a set of field names. Return according to the corresponding structure | (nameList?: [NamePath](#NamePath)[], filterFunc?: (meta: { touched: boolean, validating: boolean }) => boolean) => any |
|
||||
| getFieldError | Get the error messages by the field name | (name: [NamePath](#NamePath)) => string[] |
|
||||
| getFieldsError | Get the error messages by the fields name. Return as an array | (nameList?: [NamePath](#NamePath)[]) => FieldError[] |
|
||||
| isFieldTouched | Check if a field has been operated | (name: [NamePath](#NamePath)) => boolean |
|
||||
@ -267,7 +267,7 @@ If you are the user of v3, you can ref [migrate doc](/components/form/v3)。
|
||||
.code-box-demo .ant-form:not(.ant-form-inline):not(.ant-form-vertical) {
|
||||
max-width: 600px;
|
||||
}
|
||||
.markdown.api-container table td:last-child {
|
||||
.markdown.api-container table td:nth-of-type(4) {
|
||||
white-space: nowrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
@ -295,41 +295,6 @@ validator(rule, value, callback) => {
|
||||
}
|
||||
```
|
||||
|
||||
### Get form instance from function component
|
||||
|
||||
You can combine `forwardRef` with `useImperativeHandle` to get form instance:
|
||||
|
||||
```tsx
|
||||
import React, { forwardRef, useImperativeHandle } from 'react';
|
||||
import Form, { FormComponentProps } from 'antd/lib/form/Form';
|
||||
|
||||
const FCForm = forwardRef<FormComponentProps, FCFormProps>(({ form, onSubmit }, ref) => {
|
||||
useImperativeHandle(ref, () => ({
|
||||
form,
|
||||
}));
|
||||
`...the rest of your form`;
|
||||
});
|
||||
const EnhancedFCForm = Form.create<FCFormProps>()(FCForm);
|
||||
```
|
||||
|
||||
You can use your form component like this：
|
||||
|
||||
```tsx
|
||||
const TestForm = () => {
|
||||
const formRef = createRef<Ref>();
|
||||
return (
|
||||
<EnhancedFCForm
|
||||
onSubmit={() => console.log(formRef.current!.form.getFieldValue('name'))}
|
||||
wrappedComponentRef={formRef}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
Online demo:
|
||||
|
||||
[](https://codesandbox.io/s/wrappedcomponentref-in-function-component-fj43c?fontsize=14&hidenavigation=1&theme=dark)
|
||||
|
||||
### Why get form warning when used in Modal?
|
||||
|
||||
> Warning: Instance created by `useForm` is not connect to any Form element. Forget to pass `form` prop?
|
||||
|
||||
@ -178,7 +178,7 @@ Form 通过增量更新方式，只更新被修改的字段相关组件以达到
|
||||
| 名称 | 说明 | 类型 |
|
||||
| --- | --- | --- |
|
||||
| getFieldValue | 获取对应字段名的值 | (name: [NamePath](#NamePath)) => any |
|
||||
| getFieldsValue | 获取一组字段名对应的值，会按照对应结构返回 | (nameList?: [NamePath](#NamePath)[]) => any |
|
||||
| getFieldsValue | 获取一组字段名对应的值，会按照对应结构返回 | (nameList?: [NamePath](#NamePath)[], filterFunc?: (meta: { touched: boolean, validating: boolean }) => boolean) => any |
|
||||
| getFieldError | 获取对应字段名的错误信息 | (name: [NamePath](#NamePath)) => string[] |
|
||||
| getFieldsError | 获取一组字段名对应的错误信息，返回为数组形式 | (nameList?: [NamePath](#NamePath)[]) => FieldError[] |
|
||||
| isFieldTouched | 检查对应字段是否被用户操作过 | (name: [NamePath](#NamePath)) => boolean |
|
||||
@ -268,7 +268,7 @@ type Rule = RuleConfig | ((form: FormInstance) => RuleConfig);
|
||||
.code-box-demo .ant-form:not(.ant-form-inline):not(.ant-form-vertical) {
|
||||
max-width: 600px;
|
||||
}
|
||||
.markdown.api-container table td:last-child {
|
||||
.markdown.api-container table td:nth-of-type(4) {
|
||||
white-space: nowrap;
|
||||
word-wrap: break-word;
|
||||
}
|
||||
@ -296,41 +296,6 @@ validator(rule, value, callback) => {
|
||||
}
|
||||
```
|
||||
|
||||
### 如何在函数组件中拿到 form 实例？
|
||||
|
||||
你需要通过 `forwardRef` 和 `useImperativeHandle` 的组合使用来实现在函数组件中正确拿到 form 实例：
|
||||
|
||||
```tsx
|
||||
import React, { forwardRef, useImperativeHandle } from 'react';
|
||||
import Form, { FormComponentProps } from 'antd/lib/form/Form';
|
||||
|
||||
const FCForm = forwardRef<FormComponentProps, FCFormProps>(({ form, onSubmit }, ref) => {
|
||||
useImperativeHandle(ref, () => ({
|
||||
form,
|
||||
}));
|
||||
`...the rest of your form`;
|
||||
});
|
||||
const EnhancedFCForm = Form.create<FCFormProps>()(FCForm);
|
||||
```
|
||||
|
||||
使用表单组件可以写成这样：
|
||||
|
||||
```tsx
|
||||
const TestForm = () => {
|
||||
const formRef = createRef<Ref>();
|
||||
return (
|
||||
<EnhancedFCForm
|
||||
onSubmit={() => console.log(formRef.current!.form.getFieldValue('name'))}
|
||||
wrappedComponentRef={formRef}
|
||||
/>
|
||||
);
|
||||
};
|
||||
```
|
||||
|
||||
在线示例：
|
||||
|
||||
[](https://codesandbox.io/s/wrappedcomponentref-in-function-component-fj43c?fontsize=14&hidenavigation=1&theme=dark)
|
||||
|
||||
### 为何在 Modal 中调用 form 控制台会报错？
|
||||
|
||||
> Warning: Instance created by `useForm` is not connect to any Form element. Forget to pass `form` prop?
|
||||
|
||||
@ -248,10 +248,6 @@ const Demo = () => (
|
||||
|
||||
In v3, modifying the `initialValue` of un-operated field will update the field value synchronously, which is a bug. However, since it has been used as a feature for a long time, we have not fixed it. In v4, the bug has been fixed. `initialValues` only takes effect when initializing and resetting the form.
|
||||
|
||||
### Remove field no longer removes field value
|
||||
|
||||
In v3, we will clean up the values when the fields removed. However, it has been found that clearing fields can cause greater inconvenience than retention in practice. For example like some switching operations, the user has to retain the field value in a hidden way. Therefore, the new version of Form will always keep the fields value, and the validation rules for removing field will be ignored. So `preserve` is no longer needed.
|
||||
|
||||
### Nested field paths using arrays
|
||||
|
||||
In the past versions we used `.` to represent nested paths (such as `user.name` to represent `{ user: { name: '' } }`). However, in some backend systems, `.` is also included in the variable name. This causes the user to need additional code to convert, so in the new version, nested paths are represented by arrays to avoid unexpected behavior (eg `['user', 'name']`).
|
||||
|
||||
@ -250,10 +250,6 @@ const Demo = () => (
|
||||
|
||||
在 v3 版本中，修改未操作的字段 `initialValue` 会同步更新字段值，这是一个 BUG。但是由于被长期作为一个 feature 使用，因而我们一直没有修复。在 v4 中，该 BUG 已被修复。`initialValue` 只有在初始化以及重置表单时生效。
|
||||
|
||||
## 移除字段不再移除字段值
|
||||
|
||||
v3 版本中，我们会将移除的字段对应的值同步清理。但是在实践中，发现清除字段相比保留会造成更大的不便。例如一些切换操作，用户不得不通过隐藏的方式保留字段值。因而新版本的 Form 总是会保留字段值，而移除字段的校验规则会被忽略。也因此 `preserve` 不再需要。
|
||||
|
||||
## 嵌套字段路径使用数组
|
||||
|
||||
过去版本我们通过 `.` 代表嵌套路径（诸如 `user.name` 来代表 `{ user: { name: '' } }`）。然而在一些后台系统中，变量名中也会带上 `.`。这造成用户需要额外的代码进行转化，因而新版中，嵌套路径通过数组来表示以避免错误的处理行为（如 `['user', 'name']`）。
|
||||
|
||||
@ -109,7 +109,7 @@
|
||||
"rc-dialog": "~7.6.0",
|
||||
"rc-drawer": "~3.1.1",
|
||||
"rc-dropdown": "~3.0.0-alpha.0",
|
||||
"rc-field-form": "~0.0.0-rc.4",
|
||||
"rc-field-form": "^0.0.0-rc.5",
|
||||
"rc-input-number": "~4.5.0",
|
||||
"rc-mentions": "~1.0.0-alpha.3",
|
||||
"rc-menu": "~8.0.0-alpha.7",
|
||||
|
||||
Loading…
Reference in New Issue
Block a user