antd from表单简介及必填校验使用

一、功能

具有数据收集、校验和提交功能的表单，包含复选框、单选框、输入框、下拉选择框等元素。

二、用处

• 用于创建一个实体或收集信息。
• 需要对输入的数据类型进行校验时。

三、使用须知

1. 在data中注册

data () {
  return {
    form: this.$form.createForm(this)
  }
}

2. 在template区域使用

<a-form :form="form" @submit="handleOk">
  <a-row>
    <a-col :span="24">
       <a-form-item 
        label="XXX"
        :labelCol="{lg: {span: 6}, sm: {span: 6}}"
        :wrapperCol="{lg: {span: 16}, sm: {span: 16} }">
      </a-form-item>    
    <a-col>
  <a-row>
</a-form>

四、this.form.getFieldDecorator(id, options) 和 v-decorator="[id, options]"简介

经过 getFieldDecorator或v-decorator 包装的控件，表单控件会自动添加 value（或 valuePropName 指定的其他属性） onChange（或 trigger 指定的其他属性），数据同步将被 Form 接管，这会导致以下结果：

1. 你不再需要也不应该用 onChange 来做同步，但还是可以继续监听 onChange 等事件。
2. 你不能用控件的 value defaultValue 等属性来设置表单域的值，默认值可以用 getFieldDecorator 或 v-decorator 里的 initialValue。
3. 你不应该用 v-model，可以使用 this.form.setFieldsValue 来动态改变表单值。

用法示例
如果需要必填校验：

<a-radio-group
  name="C"
  v-decorator="[
  'isEnabled',
  {rules: [{ required: true, message: ''}],initialValue:'1' }]" >
  <a-radio :value="'1'">是</a-radio>
  <a-radio :value="'0'">否</a-radio>
</a-radio-group>

如果不需要必填校验：

<a-radio-group
  name="C"
required: false
  v-decorator="[
  'isEnabled',
  {initialValue:'1' }]" >
  <a-radio :value="'1'">是</a-radio>
  <a-radio :value="'0'">否</a-radio>
</a-radio-group>

五、需要注意的点

1. 不能与v-model一起使用

2. 使用this.form.setFieldsValue时必须保证form表单已加载完成，必要时可以用

3. v-decorator 设置默认值时可以用initialValue

 this.$nextTick(() => {
    this.form.setFieldsValue({
       A: result.data.A,
       B: result.data.B,
       C: result.data.C
    })
 })

4. this.form.getFieldDecorator(id, options) 和 v-decorator="[id, options]"中的id表示保存提交时的字段key

5. 如果在同一个区域根据条件动态显示不同的<a-form-item></a-form-item>那么应该用v-if而不是v-show

6. 如果 在input框输入之前保存 过的信息时不想让input框变成下图，可使用AUTOCOMPLETE="OFF"阻止记忆 效果

image.png

六、示例

<template>
  <div class="">
    <!--新增-->
    <a-moda :title="ccc" width="400" :maskClosable="false">
      <a-row class="m9">
        <a-form :form="form" @submit="handleOk">
          <a-row>
            <a-col :span="24">
              <a-form-item 
                label="XXX"
                :labelCol="{lg: {span: 6}, sm: {span: 6}}"
                :wrapperCol="{lg: {span: 16}, sm: {span: 16} }"
                >
                  <div class="">
                    <a-input v-decorator="[
                      'A',
                      {rules: [{ required: true, message: 'XXX不能为空' }]}
                    ]"
                    name="A"
                    placeholder="请输入大写英文字母"
                    @keyup="appCodeInputChange"
                    AUTOCOMPLETE="OFF"
                    ></a-input>
                  </div>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <a-form-item
                label="YYY"
                :labelCol="{lg: {span: 6}, sm: {span: 6}}"
                :wrapperCol="{lg: {span: 16}, sm: {span: 16} }">
                  <div class="">
                    <a-input v-decorator="[
                      'B',
                      {rules: [{ required: true, message: 'YYY不能为空' }]}
                    ]"
                    name="B"
                    AUTOCOMPLETE="OFF"
                  ></a-input>
                  </div>
              </a-form-item>
            </a-col>
          </a-row>
          <a-row>
            <a-col :span="24">
              <a-form-item
                label="是否"
                :labelCol="{lg: {span: 6}, sm: {span: 6}}"
                :wrapperCol="{lg: {span: 16}, sm: {span: 16} }">
                  <div class="">
                    <a-radio-group
                    name="C"
                    v-decorator="[
                      'isEnabled',
                      {rules: [{ required: true, message: ''}],initialValue:'1' }
                    ]"
                    >
                      <a-radio :value="'1'">是</a-radio>
                      <a-radio :value="'0'">否</a-radio>
                    </a-radio-group>
                  </div>
              </a-form-item>
            </a-col>
          </a-row>
        </a-form>
      </a-row>
      <template slot="footer">
        <govButton key="save" :iconType="'iconbaocun'" type="primary" @click="handleOk">保存</govButton>
      </template>
    </a-modal>
  </div>
</template>

<script>
  export default {
    name: 'AAAQ',
    data () {
      return {
        form: this.$form.createForm(this)
      }
    },
    methods: {
      //  确定
      handleOk () {
      // 保存时校验必填项
        this.form.validateFields((err, values) => {
          if (!err) {
            // 进行保存请求
            }
          }
        })
      },
      // 编辑
      modify (data) {
        api('GET', ``).then((result) => {
          if (result.flag === 'success') {
            // this.form.setFieldsValue 必须要在form组件显示后再使用
            this.$nextTick(() => {
              // 分别给表单字段赋值
              this.form.setFieldsValue({
                A: result.data.A,
                B: result.data.B,
                C: result.data.C
              })
            })
          } else {
            // 返回失败时的提示
            this.$message.error(result.msg)
          }
        })
      },
      // 业务代码只允许输入大写英文字母
      appCodeInputChange () {
        // 获取表单字段
        const { getFieldValue } = this.form
        // 判断该字段是否为空
        if (getFieldValue('A') !== undefined && getFieldValue('A') !== null) {
        // 给该字段赋值
          this.form.setFieldsValue({
            A: getFieldValue('A').replace(/[^A-Z]/g, '') // 判断该字段是否包含非大写字母内容，如果有则置空
          })
        }
      }
    }
  }
</script>
<!-- 去掉默认样式 -->
<style lang="less" type="text/css" >
  .ant-form-item-label > label {
    color : rgba(0, 0, 0, 0.65)
  }
  .has-error {
    border-color: #0166ff !important
  }
  .has-error .ant-input:focus {
    border-right-width: 1px !important;
    outline: 0; 
   // 原样式为红色，可根据项目需要改为适合本项目的颜色// 原样式为红色，可根据项目需要改为适合本项目的颜色
    box-shadow: 0 0 0 2px rgba(24, 144, 255, 0.2);
  }
</style>