You signed in with another tab or window. Reload to refresh your session.You signed out in another tab or window. Reload to refresh your session.You switched accounts on another tab or window. Reload to refresh your session.Dismiss alert
Copy file name to clipboardExpand all lines: components/form/index.en-US.md
+61-11Lines changed: 61 additions & 11 deletions
Display the source diff
Display the rich diff
Original file line number
Diff line number
Diff line change
@@ -25,7 +25,6 @@ You can align the controls of a `form` using the `layout` prop：
25
25
26
26
A form consists of one or more form fields whose type includes input, textarea, checkbox, radio, select, tag, and more. A form field is defined using `<a-form-item />`.
27
27
28
-
29
28
## API
30
29
31
30
### Form
@@ -48,7 +47,7 @@ A form consists of one or more form fields whose type includes input, textarea,
48
47
### Events
49
48
50
49
| Events Name | Description | Arguments | Version |
51
-
| --- | --- | --- | --- |
50
+
| --- | --- | --- | --- | --- |
52
51
| submit | Defines a function will be called if form data validation is successful. | Function(e:Event) ||
53
52
| validate | triggers after a form item is validated | name of the form item being validated, whether validation is passed and the error message if not ||
54
53
| finish | Trigger after submitting the form and verifying data successfully | function(values) | - | 2.0.0 |
@@ -57,7 +56,7 @@ A form consists of one or more form fields whose type includes input, textarea,
57
56
### Methods
58
57
59
58
| Method | Description | Parameters |
60
-
| --- | --- | --- |
59
+
| --- | --- | --- | --- |
61
60
| validate | Validate fields, it is same as validateFields | (nameList?: [NamePath](#NamePath)[]) => Promise ||
| scrollToField | Scroll to field position | (name: [NamePath](#NamePath), options: [[ScrollOptions](https://github.com/stipsan/scroll-into-view-if-needed/tree/ece40bd9143f48caf4b99503425ecb16b0ad8249#options)]) => void ||
@@ -85,11 +84,65 @@ A form consists of one or more form fields whose type includes input, textarea,
85
84
| validateFirst | Whether stop validate on first rule of error for this field. | boolean | false ||
86
85
| validateTrigger | When to validate the value of children node | string \| string[]|`change`||
87
86
88
-
#### Note
87
+
### Note
88
+
89
+
#### 3.x
90
+
91
+
Since version 3.0, Form.Item no longer hijacks child elements, but automatically checks through provider/inject dependency injection. This method can improve component performance, and there is no limit to the number of child elements. The same is true for child elements. It can be a high-level component that is further encapsulated.
92
+
93
+
You can reference [Customized Form Controls](#components-form-demo-customized-form-controls)
94
+
95
+
But it also has some disadvantages:
96
+
97
+
1. If the custom component wants Form.Item to be verified and displayed, you need to inject `const {id, onFieldChange, onFieldBlur} = useFormItemContext` and call the corresponding method.
98
+
99
+
2. A Form.Item can only collect the data of one form item. If there are multiple form items, it will cause collection confusion, for example,
100
+
101
+
```html
102
+
<a-form-item>
103
+
<a-inputname="a"></a-input>
104
+
<a-inputname="b"></a-input>
105
+
</a-form-item>
106
+
```
107
+
108
+
As above Form.Item does not know whether to collect `name="a"` or `name=`b``, you can solve this kind of problem in the following two ways:
Form.Item will hijack the only child element and listen to the `blur`and`change` events to achieve the purpose of automatic verification, so please ensure that the form field is not wrapped by other elements. If there are multiple child elements, only the first child element will be monitored for changes.
119
+
The second way is to wrap it with a custom component and call `useFormItemContext` in the custom component
91
120
92
-
If the form field to be monitored does not meet the conditions for automatic monitoring, you can associate the form field as follows:
121
+
```html
122
+
<script>
123
+
import { Form } from'ant-desing-vue';
124
+
exportdefault {
125
+
setup() {
126
+
constformItemContext=Form.useFormItemContext();
127
+
},
128
+
};
129
+
</script>
130
+
```
131
+
132
+
```html
133
+
<a-form-item>
134
+
<custom-com>
135
+
<a-inputname="a"></a-input>
136
+
<a-inputname="b"></a-input>
137
+
</custom-com>
138
+
</a-form-item>
139
+
```
140
+
141
+
#### 2.x
142
+
143
+
Form.Item hijacks the only child element and listens to the `blur` and `change` events to achieve the purpose of automatic verification, so please make sure that the form field is not wrapped by other elements. If there are multiple child elements, only the change of the first child element will be monitored.
144
+
145
+
If the form field to be monitored does not meet the conditions of automatic monitoring, you can associate the form field as follows:
@@ -124,20 +177,17 @@ If the form field to be monitored does not meet the conditions for automatic mon
124
177
125
178
See more advanced usage at [async-validator](https://github.com/yiminghe/async-validator).
126
179
127
-
128
180
### useForm (v2.2)
129
181
130
182
`useForm` is a method that can run independently of the Form component. It uses the Vue response mechanism to monitor and verify data, and returns the verification result. You can bind the verification result to any component, `Form. Item` only displays the results.
131
183
132
184
The following versions need to be provided separately by `@ant-design-vue/use` library, it is not recommended to continue to use, you should upgrade to version 2.2+ as soon as possible
0 commit comments