diff --git a/src/pages/Forms/AdvancedForm.js b/src/pages/Forms/AdvancedForm.js index f23ecdaa68b3bac08301f5b0911d85f4a5fba979..fbd39689351b897e42538e7590a21aa6c112c8c7 100644 --- a/src/pages/Forms/AdvancedForm.js +++ b/src/pages/Forms/AdvancedForm.js @@ -74,6 +74,49 @@ class AdvancedForm extends PureComponent { window.removeEventListener('resize', this.resizeFooterToolbar); } + getErrorInfo = () => { + const { + form: { getFieldsError }, + } = this.props; + const errors = getFieldsError(); + const errorCount = Object.keys(errors).filter(key => errors[key]).length; + if (!errors || errorCount === 0) { + return null; + } + const scrollToField = fieldKey => { + const labelNode = document.querySelector(`label[for="${fieldKey}"]`); + if (labelNode) { + labelNode.scrollIntoView(true); + } + }; + const errorList = Object.keys(errors).map(key => { + if (!errors[key]) { + return null; + } + return ( +
  • scrollToField(key)}> + +
    {errors[key][0]}
    +
    {fieldLabels[key]}
    +
  • + ); + }); + return ( + + trigger.parentNode} + > + + + {errorCount} + + ); + }; + resizeFooterToolbar = () => { requestAnimationFrame(() => { const sider = document.querySelectorAll('.ant-layout-sider')[0]; @@ -87,60 +130,29 @@ class AdvancedForm extends PureComponent { }); }; - render() { - const { form, dispatch, submitting } = this.props; - const { getFieldDecorator, validateFieldsAndScroll, getFieldsError } = form; - const validate = () => { - validateFieldsAndScroll((error, values) => { - if (!error) { - // submit the values - dispatch({ - type: 'form/submitAdvancedForm', - payload: values, - }); - } - }); - }; - const errors = getFieldsError(); - const getErrorInfo = () => { - const errorCount = Object.keys(errors).filter(key => errors[key]).length; - if (!errors || errorCount === 0) { - return null; + validate = () => { + const { + form: { validateFieldsAndScroll }, + dispatch, + } = this.props; + validateFieldsAndScroll((error, values) => { + if (!error) { + // submit the values + dispatch({ + type: 'form/submitAdvancedForm', + payload: values, + }); } - const scrollToField = fieldKey => { - const labelNode = document.querySelector(`label[for="${fieldKey}"]`); - if (labelNode) { - labelNode.scrollIntoView(true); - } - }; - const errorList = Object.keys(errors).map(key => { - if (!errors[key]) { - return null; - } - return ( -
  • scrollToField(key)}> - -
    {errors[key][0]}
    -
    {fieldLabels[key]}
    -
  • - ); - }); - return ( - - trigger.parentNode} - > - - - {errorCount} - - ); - }; + }); + }; + + render() { + const { + form: { getFieldDecorator }, + submitting, + } = this.props; const { width } = this.state; + return ( )} - {getErrorInfo()} -