Form
High performance Form component with data scope management. Including data collection, verification, and styles.
import { Form } from '@redshank/native';
When To Use
- When you need to create an instance or collect information.
- When you need to validate fields in certain rules.
Examples
Default
Default form element.
Completed example
Complete form example.
Manipulation
Manipulation form example.
APIs
Form
Api props extends from rc-field-form
| Attribute | Type | Accepted values | Description | Default |
|---|---|---|---|---|
| component | string Component false | Component | Customize Form render component | View |
| fields | FieldData[] | FieldData | Control Form fields status. Only use when in Redux | - |
| form | FormInstance | FormInstance | Set form instance created by useForm | - |
| initialValues | object | { [key]: value } | Initial value of Form | - |
| preserve | boolean | true false | Preserve value when field removed | false |
| validateMessages | ValidateMessage | FormInstance | Set validate message template | - |
| onFieldsChange | function | (changedFields, allFields) => void | Trigger when any value of Field changed | - |
| onFinish | function | (values) => void | Trigger when form submit and success | - |
| onFinishFailed | function | ({ values, errorFields, outOfDate }) => void | Trigger when form submit and failed | - |
| onValuesChange | function | (changedValues, values) => void | Trigger when any value of Field changed | - |
| borderBottom | number | true false | Set the bottom margin into fields | 15 |
Form.Item
Api props extends from Field
| Attribute | Type | Accepted values | Description | Default |
|---|---|---|---|---|
| dependencies | NamePath[] | NamePath | Will re-render if dependencies changed | - |
| getValueFromEvent | function | (..args: any[]) => any | Specify how to get value from event | - |
| getValueProps | function | (value) => any | Customize additional props with value. This prop will disable valuePropName | - |
| initialValue | any | any | Field initial value | - |
| isSubmit | boolean | boolean | Pass onPress works like submit to child | - |
| label | string ReactNode | Text Component | Field label | - |
| name | any | NamePath | Field name path | - |
| normalize | function | (value, prevValue, prevValues) => any | Normalize value before update | - |
| preserve | boolean | true false | Preserve value when field removed | - |
| required | boolean | boolean | Field required | - |
| rules | Rule[] | rule | Validate rules | - |
| shouldUpdate | boolean function | boolean (prevValues, nextValues) => boolean | Check if Field should update | - |
| trigger | string | Text | Collect value update by event trigger | onChange |
| validateTrigger | string string[] | Text Text Array | Config trigger point with rule validate | onChange |
| valuePropName | string | Text | Config value mapping prop with element | value |
| style | object | StyleProp<ViewStyle> | Style for the wrapper element | value |
Form.useForm
Form component default create an form instance by Form.useForm. But you can create it and pass to Form also. This allow you to call some function on the form instance. Api props extends from useForm.
const Demo = () => { const [form, onSubmit] = Form.useForm(); return <Form form={form} />; };
FormInstance
Api props extends from useForm.
| Attribute | Type | Accepted values | Description | Default |
|---|---|---|---|---|
| getFieldValue | (name: NamePath) => any | NamePath | Get field value by name path | - |
| getFieldsValue | (nameList: NamePath[]) => any | NamePath | Get list of field values by name path list | - |
| getFieldError | (name: NamePath) => string[] | NamePath | Get field errors by name path | - |
| getFieldsError | (nameList: NamePath) => FieldError[] | NamePath | Get list of field errors by name path list | - |
| isFieldsTouched | (nameList?: NamePath[], allTouched?: boolean) => boolean | NamePath | Check if list of fields are touched | - |
| isFieldTouched | (name: NamePath) => boolean | NamePath | Check if a field is touched | - |
| isFieldValidating | (name: NamePath) => boolean | NamePath | Check if a field is validating | - |
| resetFields | (fields?: NamePath[]) => void | NamePath | Reset fields status | - |
| setFields | (fields: FieldData[]) => void | FieldData | Set fields status | - |
| setFieldsValue | function | (values) => void | Set fields value | - |
| submit | function | () => void | Trigger form submit | - |
| validateFields | (nameList?: NamePath[], options?: ValidateOptions) => Promise | NamePath | Trigger fields to validate | - |
NamePath
Api props extends from NamePath.
type NamePath = string | number | (string | number)[]
FieldData
Api props extends from FieldData.
| Prop | Type |
|---|---|
| touched | boolean |
| validating | boolean |
| errors | string[] |
| name | string number string[] number[] |
| value | any |
Rule
Api props extends from Rule.
| Prop | Type |
|---|---|
| enum | any[] |
| len | number |
| max | number |
| message | string |
| min | number |
| pattern | RegExp |
| required | boolean |
| transform | (value) => any |
| type | string |
| validator | (rule, value, callback: (error?: string) => void, form) => Promise or void |
| whitespace | boolean |
| validateTrigger | string string[] |
Community:
We're excited to see the community adopt @redshank/native, raise issues, and provide feedback. Whether it's a feature request, bug report, or a project to showcase, please get involved!
DiscordGithubContributing:
PR's on @redshank/native are always welcome, please see our contribution guidelines to learn how you can contribute to this project.