關於antd form表單getFieldsError方法

 

getFieldsError()方法其實只有required：true時，雙向數據綁定。 {getFieldDecorator('note', { rules: [{ required: true, message: 'Please input your note!' }], })(<input/>)}

 

遇到一個需求，表單沒有填寫任何搜索條件搜索按鈕置灰； 做法如下：

import React, { Component } from 'react'; 
import {Form, Input, Select, Row, Col, DatePicker, Checkbox, Spin,Button} from 'antd'; 
class componentName extends Component { 
  hasErrors =()=>{ 
    const objKeys = Object.keys(fieldsError); const errArr = objKeys.filter(item => ['undefined', '', 'false'].includes('' + fieldsError[item])); return errArr.length >=14 ; 
  } 
  render() { 
    const {form: {getFieldDecorator, getFieldsValue}, advancedSearchOk,visiblebtn} = this.props; 
    return (
      <div className={`${style.advanced_search_position_wrapper} ${visiblebtn ?style.wid90:''}`}>
        <Form onSubmit={this.handleSubmit} onKeyDown={(e) => e.keyCode === 13 && advancedSearchOk()}>
          <Row>
            <Col span={18}>
              <Form.Item {...formItemLayout3} label="關鍵字">
                {getFieldDecorator('keyword', {
                  rules: [{required: false, message: '請輸入關鍵字'}],
                })(
                  <Input placeholder="多個條件請使用空格分開：客戶ID/客戶公司/集團" autoComplete="off"/>
                )}
              </Form.Item>
        </Col>
        {/* ....還有很多類似Form.Item */}
        {visiblebtn?(<Col span={24}>
              <div className='right'>
                <Button  onClick={this.handleFormReset}>重置</Button><Button style={{marginLeft: 8}} type="primary" onClick={this.handelResult} disabled={this.hasErrors(getFieldsValue())}>查詢</Button>
              </div>
            </Col>):''}
        </Row>
      </Form>
      </div>
    )}
    
 } 
 
 export default componentName;