Ant-Design-Vue中关于Form组件的使用

1.创建form表单的两种方式，不同的方式在js中创建表单的方式也不同

---

方式1：一般使用在搜索表单中，只需要双向绑定数据即可，那就使用这种方法即可

<template>
  <a-form >
    <a-form-item label="Note" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
      <a-input v-model="queryParam.note"></a-input>
    </a-form-item>
    <a-form-item label="mark" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
      <a-input v-model="queryParam.mark"></a-input>
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
      <a-button type="primary" html-type="submit" @click="handleSubmit">Submit</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
  export default {
    name: 'TestForm',
    data () {
      return {
        queryParam:{
          note:'',
          mark:''
        }
      }
    },
    methods: {
      handleSubmit () {
        console.log(this.queryParam)
      }
    }
  }
</script>

View Code

方式2：在登录，或者注册等等应用场景中使用，需要对表单进行校验等等操作，请使用这种方法

 如果只有图，那我还怎么写代码？怎么复制粘贴？怎么工作？

<template>
  <a-form :form="form" @submit="handleSubmit">
    <a-form-item label="Note" :label-col="{ span: 5 }" :wrapper-col="{ span: 12 }">
      <!-- 建议使用antd自带的v-decorator来定义表单项,建议封装校验方法，页面结构更清晰 -->
      <a-input v-decorator="['note', ValidateRules.note]"/>
      <!-- 没有校验方法，也可以直接这么写 -->
      <!-- <a-input v-decorator="['note']"/> -->
    </a-form-item>
    <a-form-item :wrapper-col="{ span: 12, offset: 5 }">
      <a-button type="primary" html-type="submit">Submit</a-button>
    </a-form-item>
  </a-form>
</template>

<script>
  export default {
    name: 'TestForm',
    data () {
      return {
        // 这里是用createForm创建表单，传入this即可
        form: this.$form.createForm(this),  
        // 后面这个参数是options配置项(可选参数)，为啥要设置他，见后面说明
        //form: this.$form.createForm(this, { name: 'loginForm' }),  
        ValidateRules: {
          note: { rules: [{ required: true, message: 'Please input your note!' }] }
        }
      }
    },
    methods: {
      handleSubmit (e) {
        const aa = document.getElementById('note')
        console.log(aa.value)
        e.preventDefault()
        this.form.validateFields((err, values) => {
          if (!err) {
            console.log('Received values of form: ', values)
          }
        })
        console.log(this.form.getFieldsValue())
      }
    }
  }
</script>

View Code

2.在使用createForm()创建表单的时候，传入options.name的原因：

图片太小，请在图片上点击右键，选择在新标签页中打开即可。

 如果按照上面所写，你定义两个表单，都有个属性值叫做gender的话，那他们的id也是相同的，都是 id="gender"，按照原则来说，一个页面不应该有相同的id。可能会导致如下：

const genderDiv = document.getElementById('gender');　　// 你在这里获取id为gender的标签也会引起歧义，如果当前页面只有一个form表单，或者多个表单没有重复字段，不设置name并无影响
console.log(genderDiv.value);　　// 你只能打印出来一个表单中的gender的值，另一个表单的值你获取不到了，因为id设置重复了，覆盖了

3.动态校验规则：

<template>
  <a-form :form="form">
    <a-form-item
      :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol"
      label="Name"
    >
      <a-input
        v-decorator="['username',ValidateRules.username]"
        placeholder="Please input your name"
      />
    </a-form-item>
    <a-form-item
      :label-col="formItemLayout.labelCol"
      :wrapper-col="formItemLayout.wrapperCol"
      label="Nickname"
    >
      <a-input
        v-decorator="['nickname',ValidateRules.nickname]"
        placeholder="Please input your nickname"
      />
    </a-form-item>
    <a-form-item :label-col="formTailLayout.labelCol" :wrapper-col="formTailLayout.wrapperCol">
      <a-checkbox :checked="checkNick" @change="handleChange">
        Nickname is required
      </a-checkbox>
    </a-form-item>
    <a-form-item :label-col="formTailLayout.labelCol" :wrapper-col="formTailLayout.wrapperCol">
      <a-button type="primary" @click="check">
        Check
      </a-button>
    </a-form-item>
  </a-form>
</template>

<script>
  const formItemLayout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 8 },
  };
  const formTailLayout = {
    labelCol: { span: 4 },
    wrapperCol: { span: 8, offset: 4 },
  };
  export default {
    data() {
      return {
        checkNick: false,   // 双向绑定的checkbox的状态
        formItemLayout,   // 表单的label布局和wrapper-col布局
        formTailLayout,
        form: this.$form.createForm(this),    // 创建表单
        ValidateRules:{ // 表单校验方法，其中nickname的表单校验规则，由this.checkNick属性决定
          username:{rules: [{ required: true, message: 'Please input your nickname' }]},
          nickname:{rules: [{ required: this.checkNick, message: 'Please input your nickname' }]}}
      };
    },
    methods: {
      check() {
        this.form.validateFields(err => {
          if (!err) {
            console.info('success');
          }
        });
      },
      handleChange(e)  {  //checkbox绑定的change方法，传入的值为checkbox的状态true或者false
        this.checkNick = e.target.checked;  // 修改checkNick的值，相当于改变nickname的校验规则
        this.$nextTick(() => {  // 注意要放入nextTick函数中去
          this.form.validateFields(['nickname'], { force: true });    // 启动校验规则，force为强制校验
        });
      },
    },
  };
</script>

View Code

 4.自行处理表单数据

补充：validate-status是form-item的属性中的校验状态属性，如不设置，则会根据校验规则自动生成，可选：'success' 'warning' 'error' 'validating

help也是form-item中的属性，相当于错误提示，跟validate-status搭配使用

<template>
  <a-form>
    <a-form-item
      :label-col="labelCol"
      :wrapper-col="wrapperCol"
      label="Prime between 8 & 12"
      :validate-status="number.validateStatus"
      :help="number.errorMsg || tips"
    >
      <a-input-number :min="8" :max="12" :value="number.value" @change="handleNumberChange" />
    </a-form-item>
  </a-form>
</template>
<script>
  function validatePrimeNumber(number) {
    if (number === 11) {
      return {validateStatus: 'success',errorMsg: null,};
    }
    return { validateStatus: 'error',errorMsg: 'The prime between 8 and 12 is 11!',};
  }
  export default {
    data() {
      return {
        labelCol: { span: 7 },
        wrapperCol: { span: 12 },
        number: {value: 11,},
        tips:'A prime is a natural number greater than 1 that has no positive divisors other than 1 and itself.',
      };
    },
    methods: {
      handleNumberChange(value) {
        this.number = {
          ...validatePrimeNumber(value),
          value,
        };
      },
    },
  };
</script>

View Code