关于ant-design Form表单使用的小技巧

Posted 2023-04-23

参考技术A 本文简单分析了下 Form 组件的特点，以及定制化输入组件的封装技巧，希望对大家有所帮助。

Form.create() 返回一个HOC，将内部创建的 form 对象通过 props 传递给 FormDemo 组件， form 提供的 getFiledDecorator api从用法上看也是一个HOC，通过该api包装后的 Input 组件已经和 FormDemo 上层的HOC双向绑定，我们可以通过 form.validateFields 做表单域校验，获取表单值等操作。

实际上 form.getFiledDecorator() 返回的HOC给包裹的组件设置了 value 和 onChange 两个props，顶层HOC在提供的 onChange 内部劫持组件的输入变化，保存状态，同步 value ，从而实现双向绑定。

经过分析，实际上 form.getFiledDecorator 包裹的组件不一定非得是 antd 提供的输入组件，我们自己也可以封装针对特定业务场景使用的复杂组件，只要在组件内部绑定来自HOC的 value 以及触发来自HOC的 onChange 事件，即可实现和 form 的双向绑定，从而充分利用 Form 组件的特性。

ant-design表单自定义验证

<a-form :form="form">
    <a-form-item :labelCol="labelCol"
                 :wrapperCol="wrapperCol"
                 label="适用阶段"
                 hasFeedback>
      <a-select v-decorator="['mealCategory', {rules:[{required:true,message:'适用阶段不能为空'}]}]"
                @blur="getMealCategory"
                :disabled="isDisabled"
                placeholder="请选择适用阶段">
        <a-select-option value="小学">小学</a-select-option>
        <a-select-option value="初中">初中</a-select-option>
        <a-select-option value="高中">高中</a-select-option>
      </a-select>
    </a-form-item>
    
    <a-form-item :labelCol="labelCol"
                 :wrapperCol="wrapperCol"
                 label="活动套餐名称"
                 hasFeedback>
      <a-input placeholder="请输入活动套餐名称"
               v-decorator="['mealName', {rules:[{required:true,message:'活动套餐名称不能为空'}]}]" />
    </a-form-item>
</a-form>