AntDesign AFormItem中表单元素嵌套及校验

一、问题

1.需求希望：选择某个单选项后出现复选框。

2.在 AFormItem中需要 ARadioGroup 和 AFormItem 组合使用；但是实际书写时发现会报错并且单选项和复选框同时存在时会报错：

bash 复制代码

web/:6Warning: [ant-design-vue: Form.Item] FormItem can only collect one field item,
 you haved set `ARadioGroup`, `ACheckboxGroup` 2 field items. 
You can set not need to be collected fields into `a-form-item-rest`

大致意思就是说：一个AFormItem中不能同时存在 ARadioGroup和ACheckboxGroup；可以改用AFormItemRest

二、解决方法

尝试在ARadioGroup和ACheckboxGroup外面套一层 AFormItemRest，确实不报错了，但是吧AFormItemRest通过打印发现配置的rules规则不会执行，不支持表单校验了......（这个表单其他地方都是用AForm的rules校验的，不能因为这个重新自己写一个吧)

html 复制代码

 <AFormItem
                v-for="dataItem of contentItem.data"
                :key="dataItem.key"
                :label="dataItem.label"
                :required="dataItem.required"
                :rules="dataItem.rules ? dataItem.rules : undefined"
                class="data-item"
                :name="dataItem.key"
              >
                <template v-if="dataItem.type === 'radio'">
                  <AFormItemRest>
                    <div class="grid">
                      <ARadioGroup
                        v-model:value="(formData as any)[dataItem.key]"
                        class="text-base"
                        :options="dataItem.options"
                      >
                      </ARadioGroup>

                      <template v-if="dataItem.optionDetails">
                        <template v-for="(optionDetail, optionKey) in dataItem.optionDetails" :key="optionKey">
                          <ACheckboxGroup
                            v-model:value="(formData as any)[optionDetail.key]"
                            class="text-base"
                            :options="optionDetail.options"
                          ></ACheckboxGroup>
                        </template>
                      </template>
                    </div>
                  </AFormItemRest>
                </template>
    
                <template v-else>
                  <span class="text-base"> {{ (formData as any)[dataItem.key] }} </span>
                </template>
                <template v-if="dataItem.tips">
                  <div class="text-ctext03">{{ dataItem.tips }}</div>
                </template>
              </AFormItem>

2.还能怎么办呢？思考、乱改，放弃、再改

3.既然一个AFormItem中只能放一个表单元素，那如果ACheckboxGroup也放在一个AFormItem中，好像也满足这条规则。竟然对了，也不报错了，而且表单校验依然支持

html 复制代码

              <AFormItem
                v-for="dataItem of contentItem.data"
                :key="dataItem.key"
                :label="dataItem.label"
                :required="dataItem.required"
                :rules="dataItem.rules ? dataItem.rules : undefined"
                class="data-item"
                :name="dataItem.key"
              >
                <template v-if="dataItem.type === 'radio'">
                  <div class="grid">
                    <ARadioGroup
                      v-model:value="(formData as any)[dataItem.key]"
                      class="text-base"
                      :options="dataItem.options"
                    >
                    </ARadioGroup>

                    <template v-if="dataItem.optionDetails">
                      <template v-for="(optionDetail, optionKey) in dataItem.optionDetails" :key="optionKey">
                        <AFormItem
                          v-if="(formData as any)[dataItem.key]?.toString() === optionKey?.toString()"
                          :name="optionDetail.key"
                          :rules="optionDetail.rules"
                        >
                          <ACheckboxGroup
                            v-model:value="(formData as any)[optionDetail.key]"
                            class="text-base"
                            :options="optionDetail.options"
                          ></ACheckboxGroup>
                        </AFormItem>
                      </template>
                    </template>
                  </div>
                </template>
         
                <template v-else>
                  <span class="text-base"> {{ (formData as any)[dataItem.key] }} </span>
                </template>
                <template v-if="dataItem.tips">
                  <div class="text-ctext03">{{ dataItem.tips }}</div>
                </template>
              </AFormItem>

4.最终效果

三、总结

1.一个AFormItem中如果希望嵌套多个表单元素，需要把每个表单元素都有一个AFormItem包裹 ，不会报错并且支持表单校验

2.使用AFormItemRest也支持嵌套多个表单元素，但是里面的元素不支持表单校验了

希望对你有帮助！

如有错误,欢迎指正,谢谢！