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 :

``bash
yarn add antd-form-has-error-hoc
`

using npm :

`bash
npm install antd-form-has-error-hoc --save
`

Example

online example : https://lijinke666.github.io/antd-form-has-error-hoc/

Usage

`jsx
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.create()
@withAntdFormHasError()
class App extends PureComponent {
render() {
const { getFieldDecorator } = this.props.form;
console.log(this.props.hasError) // true
return (


{getFieldDecorator('username', {
// if set required true the hoc is get the field error
rules: [{ required: true, message: 'Please input your username!' }]
})()}


{getFieldDecorator('password', {
// if set required false the hoc is ignore the field error
rules: [{ required: false, message: 'Please input your Password!' }]
})()}


type="primary"
htmlType="submit"

// all required field not empty and validate success this.props.hasError is false
disabled={this.props.hasError}
>
Log in



);
}
}


// for edit

@Form.create()
@withAntdFormHasError()
class App extends PureComponent {
render() {
const { getFieldDecorator } = this.props.form;
console.log(this.props.hasError) // false
return (


{getFieldDecorator('username', {
rules: [{ required: true, message: 'Please input your username!' }]
})()}


{getFieldDecorator('password', {
rules: [{ required: true, message: 'Please input your Password!' }]
})()}


);
}
componentDidMount() {

// if edit , after set fields value complete , this.props.hasError is false
this.props.form.setFieldsValue({
username: "test user name",
password: 123456
})
}
}


// for ignore

@Form.create()
@withAntdFormHasError(['username','password'])
// or @withAntdFormHasError((fields)=> fields.slice(0,2))
class App extends PureComponent {
render() {
const { getFieldDecorator } = this.props.form;

// username and password field is required, but by hoc , you can ignore
console.log(this.props.hasError) // true
return (




{getFieldDecorator('username', {
rules: [{ required: true, message: 'Please input your username!' }]
})()}


{getFieldDecorator('password', {
rules: [{ required: true, message: 'Please input your Password!' }]
})()}


);
}
}


`

DynamicForm

`jsx
@Form.create()
@withAntdFormHasError()
class DynamicForm extends PureComponent {
state = {
visible: true,
fields: []
}
onToggleVisible = e => {
this.setState(
{
visible: e.target.checked
},
() => {
// form item dynamic increase or reduce you can call this.props.updateFieldsStatus()
// get new this.props.hasError
this.props.updateFieldsStatus()
}
)
}
addFields = () => {
this.setState({
fields: [...this.state.fields, 1]
}, () => {
this.props.updateFieldsStatus()
})
}
render() {
const { visible, fields } = this.state
const { getFieldDecorator } = this.props.form
return (


Dynamic Form

{getFieldDecorator('username', {
rules: [{ required: true, message: 'Please input your username!' }]
})()}


{getFieldDecorator('password', {
rules: [{ required: true, message: 'Please input your Password!' }]
})()}

{visible && (

{getFieldDecorator('phone', {
rules: [{ required: true, message: 'Please input your Phone!' }]
})()}

)}
{fields.map((_, index) => {
return (

{getFieldDecorator(field-${index}, {
rules: [{ required: true, message: 'required' }]
})()}

)
})}

type="primary"
htmlType="submit"
disabled={this.props.hasError}
>
Log in

style={{ marginLeft: 20 }}
checked={visible}
onChange={this.onToggleVisible}
>
toggle phone visible


Add Fields



)
}
}


`

Parent component

`jsx
class ParentComponent extends PureComponent {
render() {
// 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.log(form)
}
return (

)
}
}
`

Api

`js
@withAntdFormHasError(needIgnoreFields?: string[] | (fields: string[]) => string[])

this.props.hasError
this.props.defaultFieldsValue
this.props.updateFieldsStatus()
`

Development

`bash
git clone https://github.com/lijinke666/antd-form-has-error-hoc.git
npm install
npm start
``

License

MIT