vue3 antd项目实战——Form表单使用【v-model双向绑定数据，form表单嵌套input输入框、Radio单选框】

本文依旧沿用ant design vue组件库和ts语言🔥🔥更多内容见Ant Design Vue官方文档

知识调用（form表单的源代码附在文章最后）

🔥🔥 vue3+ant design vue+ts实战【ant-design-vue组件库引入】
🔥 Ant Design Vue组件库——在vue项目中使用单选框 Radio

场景复现

一个功能齐全的后台管理系统，一定离不开Form表单的使用，form表单有很多学问，从本期文章开始会详细介绍如何在项目中使用form表单、完成数据的双向绑定、各种组件的嵌套，最后形成封装好了的form表单，可以实现复用。

具体UI需求如下：（本期文章详细介绍）

• 1.表单需要有输入框，限制输入字数，样式为文本域
• 2.表单需要有单选组合，样式为垂直平铺
• 3.表单需要有按钮组合，包括取消按钮和确认按钮

功能需求：（下期文章详细介绍）

• 1.表单的值需要动态绑定
• 2.点击确认按钮，控制台能够正确打印表单提交的值
• 3.点击取消按钮，表单内容能够重置
• 4.点击确认按钮时，检查表单输入是否有为空的部分，给出相应提示

UI界面最终实现效果：

实现需求

一定别忘了，任何时候使用组件，都需要在main.ts文件中注册，才能在页面中使用。
组件的注册在《知识调用》文章中都能找到，这里就不多介绍了。

form表单整体架构的搭建

form表单整体架构可以分为三个部分，也就是三个form-item，分别用于嵌套input输入框文本域、radiogroup垂直单选框组合、button按钮组合
html部分：

<a-form
   class="form"
   name="basic"
   :model="contentFormState"
   autocomplete="off"
   >
   <p style="font-size:16px;margin-top:24px;">
     <b>给 小朱 添加一条荣誉</b>
     <!-- input输入框文本域-->
   </p>
   <a-form-item name="promotionContent">
      <p>证书内容</p>
   </a-form-item>
   <a-form-item>
      <p style="margin-top:-10px">选择 <b>小朱</b> 需要绑定的证书</p>
      <!-- radiogroup单选框组合-->
   </a-form-item>
   <a-form-item class="button-box">
      <!-- 按钮组合-->
   </a-form-item>
</a-form>

css部分：（可以根据需求进行调整）

.form {
   
    margin:0 auto;
    width: 500px;
    height: 450px;
    margin-top