2020-01-06

antDeaign-form-getFieldDecorator 使用註意事項

一、使用getFieldDecorator之前，必須先使用 Form.create({ })(Form) 將表單組件包裹起來

class ControlForm extends React.Component {}

// 導出時將組件 ControlForm 用 Form.create()包裹起來
export default Form.create()(ControlForm)

二、經過 Form.create 包裝的組件將會自帶 this.props.form 屬性，通過解構賦值將 form 解構出來

// 解構出 form
const {form} = this.props

// 解構出 getFieldDecorator
const {getFieldDecorator} = form

三、使用 getFieldDecorator 方法

<Form.Item label={item.label}>
  { getFieldDecorator(item.label, {
     // 預設值（初始值）
     initialValue: 5,
     // 校驗規則：最大長度、最小長度、校驗文案、正則表達式校驗、是否必選
     rules: [
        {
           min: 3,
           max: 5,
           message: '長度應在3~5個字元',
        },
        {
           required: true,
        },
        {
           pattern: '^[a-zA-Z]\w{5,17}$',
           message: '以字母開頭，長度在6~18之間，只能包含字母、數字和下劃線)',
        },
     ],
  })(<Input />)}
</Form.Item>