antd-form-has-error-hoc
A ant-design form enhance high order component , auto collects form errors , you can use this.props.hasError
disabled your submit button, effectively reduce the amount of code
Installation
using yarn
:
yarn add antd-form-has-error-hoc
using npm
:
npm install antd-form-has-error-hoc --save
Example
online example : https://lijinke666.github.io/antd-form-has-error-hoc/
Usage
import React from 'react';import ReactDOM from 'react-dom';import withAntdFormHasError IAntdFormHasErrorProps from 'antd-form-has-error-hoc';import Form Input Button from 'antd';import FormComponentProps from 'antd/lib/form'; type Props = IAntdFormHasErrorProps & FormComponentProps; @Form@<Props> { const getFieldDecorator = thispropsform; console // true return <Form> <Form.Item> <Input ="Username" /> </Form.Item> <Form.Item> <Input ="password" ="Password" /> </Form.Item> <Form.Item> <Button ="primary" ="submit" // `..` = > Log in </Button> </Form.Item> </Form> ; } // for edit @Form@<Props> { const getFieldDecorator = thispropsform; console // false return <Form> <Form.Item> <Input ="Username" /> </Form.Item> <Form.Item> <Input ="password" ="Password" /> </Form.Item> </Form> ; } { // if edit , after set fields value complete , `this.props.hasError` is false thispropsform } // for ignore @Form@// or @withAntdFormHasError((fields)=> fields.slice(0,2))<Props> { const getFieldDecorator = thispropsform; // username and password field is required, but by hoc , you can ignore console // true return <Form> <Form.Item> <Input ="Username" /> </Form.Item> <Form.Item> <Input ="password" ="Password" /> </Form.Item> </Form> ; }
DynamicForm
@Form@ state = visible: true fields: { this } { this } { const visible fields = thisstate const getFieldDecorator = thispropsform return <Form => <h2>Dynamic Form</h2> <Form.Item> <Input ="Username" /> </Form.Item> <Form.Item> <Input ="password" ="Password" /> </Form.Item> visible && <Form.Item> <Input ="text" ="phone" /> </Form.Item> fields <Form.Item> <Button ="primary" ="submit" = > Log in </Button> <Checkbox = = = > toggle phone visible </Checkbox> <Button ="link" => Add Fields </Button> </Form.Item> </Form> }
Parent component
{ // if use `withAntdFormHasError` wrapper component in parent component // use `defaultFieldsValue` fill form item fields const defaultFieldsValue = username: 'test user name' password: 123456 // get antd form ref const getRef = form console return <CreateForm = =/> }
Api
@ thispropshasErrorthispropsdefaultFieldsValuethisprops
Development
git clone https://github.com/lijinke666/antd-form-has-error-hoc.gitnpm installnpm start