90 lines
5.9 KiB
Markdown
90 lines
5.9 KiB
Markdown
## API
|
|
|
|
### Form
|
|
|
|
| Property | Description | Type | Default Value | Version |
|
|
| --- | --- | --- | --- | --- |
|
|
| model | data of form component | object | | |
|
|
| rules | validation rules of form | object | | |
|
|
| hideRequiredMark | Hide required mark of all form items | Boolean | false | |
|
|
| layout | Define form layout | 'horizontal'\|'vertical'\|'inline' | 'horizontal' | |
|
|
| labelAlign | text align of label of all items | 'left' \| 'right' | 'right' | |
|
|
| labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>` | [object](/components/grid/#Col) | | |
|
|
| wrapperCol | The layout for input controls, same as `labelCol` | [object](/components/grid/#Col) | | |
|
|
| colon | change default props colon value of Form.Item (only effective when prop layout is horizontal) | boolean | true | |
|
|
| validateOnRuleChange | whether to trigger validation when the `rules` prop is changed | boolean | true | |
|
|
|
|
### Events
|
|
|
|
| Events Name | Description | Arguments |
|
|
| --- | --- | --- |
|
|
| submit | Defines a function will be called if form data validation is successful. | Function(e:Event) |
|
|
| validate | triggers after a form item is validated | prop name of the form item being validated, whether validation is passed and the error message if not |
|
|
|
|
### Methods
|
|
|
|
| Method | Description | Parameters |
|
|
| --- | --- | --- |
|
|
| validate | validate the whole form. Takes a callback as a param. After validation, the callback will be executed with two params: a boolean indicating if the validation has passed, and an object containing all fields that fail the validation. Returns a promise if callback is omitted | Function(callback: Function(boolean, object)) |
|
|
| validateField | validate one or several form items | Function(props: string \| array, callback: Function(errorMessage: string)) |
|
|
| resetFields | reset all the fields and remove validation result | â |
|
|
| clearValidate | clear validation message for certain fields. The parameter is prop name or an array of prop names of the form items whose validation messages will be removed. When omitted, all fields' validation messages will be cleared | Function(props: string \| array) |
|
|
|
|
### Form.Item
|
|
|
|
| Property | Description | Type | Default Value | Version |
|
|
| --- | --- | --- | --- | --- |
|
|
| prop | a key of `model`. In the use of validate and resetFields method, the attribute is required | string | | |
|
|
| rules | validation rules of form | object \| array | | |
|
|
| autoLink | Whether to automatically associate form fields. In most cases, you can use automatic association. If the conditions for automatic association are not met, you can manually associate them. See the notes below. | boolean | true | |
|
|
| colon | Used with `label`, whether to display `:` after label text. | boolean | true | |
|
|
| extra | The extra prompt message. It is similar to help. Usage example: to display error message and prompt message at the same time. | string\|slot | | |
|
|
| hasFeedback | Used with `validateStatus`, this option specifies the validation status icon. Recommended to be used only with `Input`. | boolean | false | |
|
|
| help | The prompt message. If not provided, the prompt message will be generated by the validation rule. | string\|slot | | |
|
|
| htmlFor | Set sub label `htmlFor`. | string | | |
|
|
| label | Label text | string\|slot | | |
|
|
| labelCol | The layout of label. You can set `span` `offset` to something like `{span: 3, offset: 12}` or `sm: {span: 3, offset: 12}` same as with `<Col>` | [object](/components/grid/#Col) | | |
|
|
| labelAlign | text align of label | 'left' \| 'right' | 'right' | |
|
|
| required | Whether provided or not, it will be generated by the validation rule. | boolean | false | |
|
|
| validateStatus | The validation status. If not provided, it will be generated by validation rule. options: 'success' 'warning' 'error' 'validating' | string | | |
|
|
| wrapperCol | The layout for input controls, same as `labelCol` | [object](/components/grid/#Col) | | |
|
|
|
|
#### Note
|
|
|
|
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.
|
|
|
|
If the form field to be monitored does not meet the conditions for automatic monitoring, you can associate the form field as follows:
|
|
|
|
```html
|
|
<a-form-model-item prop="form.name" ref="name" :autoLink="false">
|
|
<a-input v-model="other" />
|
|
<span>hahha</span>
|
|
<div>
|
|
<a-input
|
|
v-model="form.name"
|
|
@blur="() => {$refs.name.onFieldBlur()}"
|
|
@change="() => {$refs.name.onFieldChange()}"
|
|
/>
|
|
</div>
|
|
</a-form-model-item>
|
|
```
|
|
|
|
### Validation Rules
|
|
|
|
| Property | Description | Type | Default Value |
|
|
| --- | --- | --- | --- |
|
|
| trigger | When to validate the value of children node. | 'blur' \| 'change' \| `['change', 'blur']` | - |
|
|
| enum | validate a value from a list of possible values | string | - |
|
|
| len | validate an exact length of a field | number | - |
|
|
| max | validate a max length of a field | number | - |
|
|
| message | validation error message | string | - |
|
|
| min | validate a min length of a field | number | - |
|
|
| pattern | validate from a regular expression | RegExp | - |
|
|
| required | indicates whether field is required | boolean | `false` |
|
|
| transform | transform a value before validation | function(value) => transformedValue:any | - |
|
|
| type | built-in validation type, [available options](https://github.com/yiminghe/async-validator#type) | string | 'string' |
|
|
| validator | custom validate function (Note: [callback must be called](https://github.com/ant-design/ant-design/issues/5155)) | function(rule, value, callback) | - |
|
|
| whitespace | treat required fields that only contain whitespace as errors | boolean | `false` |
|
|
|
|
See more advanced usage at [async-validator](https://github.com/yiminghe/async-validator).
|