Not a member of Pastebin yet?
Sign Up,
it unlocks many cool features!
- ### formCreator API
- 使用方式：
- ```js
- class CustomizedFormDemo extends React.Component {
- // ...
- }
- const CustomizedForm = formCreator(defaultValues, rules, options)(CustomizedFormDemo);
- ```
- | 参数 | 说明 | 类型（PropTypes）/可选值 | Required | 默认值 |
- | ------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | ------------------------ | -------- | ------ |
- | defaultValues | 表单默认值 | Object | - | {} |
- | rules | 校验规则 | Object | - | {} |
- | options | 其他配置 `options.first`: 遇到失败了的校验规则后停止校验; `options.cover`: 在上次校验还未完成时新的校验会中止之前的校验; `options.parallel`: 每一个表单域会同时执行所有校验函数（Promise.all)而非顺序执行 | Object | - | - |
- > ️⚠️ 注意 ️: 请不要使用输入组件的`value`、`defaultValue`等属性而是使用 formCreator 的`defaultValues`设置默认值。如果输入组件内部使用了 `defaultProps` 设置默认值，应将 defaultValues 对应属性的值与之保持一致，否则会影响 isInitialized 值的准确性。
- #### 被 formCreator 包装的组件将会获得以下属性，可以使用`this.props`访问
- | 参数 | 说明 | 类型/可选值 | 默认值 |
- | --------------- | ----------------------------------------------- | ----------- | ------ |
- | formValues | 表单当前值 | Object | {} |
- | formErrors | 表单当前错误信息 | Object | {} |
- | isValidating | 是否正在校验 | Boolean | false |
- | isValid | 表单校验是否通过 | Boolean | true |
- | isInitialized | 表单是否是初始状态 | Boolean | true |
- | updateItemData | 设置某一表单项的值 function(name, value) | Function | - |
- | updateItemsData | 批量表单项的值 function(values: Object) | Function | - |
- | validateOne | 校验某一表单项的值 function(name) => Promise | Function | - |
- | validateAll | 校验所有表单项的值 function() => Promise | Function | - |
- | submit | 提交表单 function(onSuccess, onFail) => Promise | Function | - |
- | initialize | 初始化表单 | Function | - |
- #### 校验规则
- 校验规则通过属性名与对应值匹配。如果校验对象某一属性值为数组，将按顺序执行所有数组内校验规则，
- | 参数 | 说明 | 类型/可选值 |
- | --------- | ----------------------------------------------------------------------------------------- | ----------- |
- | validator | 校验函数。 if(返回结果 == true)时，校验通过，否则失败。function(value) => isValid:Boolean | func |
- | message | 校验失败的提示信息 function(value, resultOfValidator) => message:String | String/Func |
- > ⚠️ 注意: 同步校验函数在内部将会被转为异步执行。
- <!-- react-component-api -->
- ### FormItem API
- FormItem与校验函数无关，只负责表单样式。
- | 参数 | 说明 | 类型（PropTypes）/ 可选值 | Required | 默认值 |
- | --------- | -------- | ------------------------- | -------- | ------- |
- |disabled | 是否禁用 | Boolean | - | <span class="boolean">false</span>|
- |errorIcon | 校验失败状态icon | Node | - | <p><Icon type="cancel-o" /></p>|
- |extraInfo | 附加信息，当需要错误信息和提示文案同时出现时使用 | String | - | -|
- |helperText | 提示文本 | ArrayOf / String | - | <span class="object">[]</span>|
- |helperTextProps | helperText 属性 | Object | - | <p>{}</p>|
- |helperTextRender | 提示文本渲染函数 function(text) => textNode: reactNode | Function | - | -|
- |initialIcon | 初始状态icon | Node | - | -|
- |inline | 是否为行内布局 | Boolean | - | -|
- |inputId | input元素Id | String | - | -|
- |inputLayout | 表单项内容布局，同 Col 组件，设置 span offset 值，如 {span: 3, offset: 12} | Object | - | <p>{}</p>|
- |label | label 标签的文本 | Node | - | -|
- |labelLayout | label布局，同 Col 组件，设置 span offset 值，如 {span: 3, offset: 12} | Object | - | <p>{</p><p> size: 8,</p><p>}</p>|
- |name | 表单项唯一表识，与formData, errorMsg, formValidatingStatus对应项关联 | String | - | -|
- |showStatusIcon | 是否显示状态icon | Boolean | - | <span class="boolean">true</span>|
- |size | 表单项尺寸 | 'small' / 'medium' / 'large' | - | <span class="string">'medium'</span>|
- |statusIconLayout | 状态icon布局，同 Col 组件，设置 span offset 值，如 {span: 3, offset: 12} | Object | - | <p>{</p><p> size: 4,</p><p>}</p>|
- |successIcon | 校验通过状态icon | Node | - | <p><Icon type="ok-o" /></p>|
- |validateStatus | 表单项校验结果状态 | 'initial' / 'success' / 'error' | - | <span class="string">'initial'</span>|
- |validating | 表单项师傅校验中 | Boolean | - | <span class="boolean">false</span>|
- |validatingIcon | 校验中状态icon | Node | - | <p><Icon type="spin4" spin /></p>|
- ### ValidationField API
- ValidationField是基于FormItem组件对校验逻辑的封装，下表未列出的属性将会传递给FormItem。
- | 参数 | 说明 | 类型（PropTypes）/ 可选值 | Required | 默认值 |
- | --------- | -------- | ------------------------- | -------- | ------- |
- |debouncedChildren | - | - | - | ['NeatUI.Input', 'NeatUI.AutoSuggest']|
- |disabled | 是否禁用 | Boolean | - | <span class="boolean">false</span>|
- |inputId | input元素Id | String | - | -|
- |label | label 标签的文本 | Node | - | -|
- |name | 表单项唯一表识，与formData, errorMsg, formValidatingStatus对应属性关联 | String | true | -|
- |onChange | 表单项值变化时触发 | Function | - | -|
- |onValidate | 表单项值校验完成时触发 | Function | - | -|
- |size | 表单项尺寸 | 'small' / 'medium' / 'large' | - | <span class="string">'medium'</span>|
- |validateTrigger | 子节点的触发校验的属性，如 Input 可以设置为 'onBlur' | String | - | <span class="string">'onChange'</span>|
- |valuePropName | 子节点的值的属性，如 Datapicker 的是 'defaultValue' | String | - | <span class="string">'value'</span>|
Add Comment
Please, Sign In to add comment
