a-form和a-form-model的区别和使用

1.a-form的使用

组件使用：

<a-form :model="bhform" :form="bhform">

        <a-form-item label="驳回原因" style="display: flex">

          <a-input  v-decorator="['refuseReason', { rules: [{ required: true, max: 20, message: '长度为1-20' }]}]" />

        </a-form-item>

     </a-form>

data定义：

    data() {

     return {
            bhform: this.$form.createForm(this, {name: 'coordinated'}),
     }
}

赋值：

 this.bhform.setFieldsValue({

        'refuseReason': '原因惺惺惜惺惺',

 })

清除值：

 this.bhform.setFieldsValue({

        'refuseReason': '',

 })

获取表单内容：

 this.bhform.getFieldValue('refuseReason')

重置：

 this.bhform.resetFields()

总体校验（提交）：

this.bhform.validateFields((err, values) => {

        if (!err) { 

 //成功

        }

})

2.a-form-model的使用

组件使用:

 <a-form-model ref="form" :model="model" :rules="validatorRules" >

         <a-form-model-item label="通知内容" prop="noticeContent">

             <a-input v-model="model.noticeContent" ></a-input>

          </a-form-model-item>

  </a-form-model>  

data定义：

  data() {

       const integerValid = (rule, cellValue, callback) => {

            if (cellValue && !/^\w+$/.test(cellValue)) {

                return new Error('应为正整数')

            } else {

                callback()

            }

        } 

return {
    model:{},

  validatorRules: {

        noticeContent: [

            { max: 500, message: '超过最大长度500!'},

                    { validator: integerValid } //自定义校验

                ]
  }
} 

赋值：

this.model.noticeContent='xxxxxx' 或者

this.$set(this.model,'noticeContent','xxxxxx')

清除值：

this.model.noticeContent='' 或者

this.$set(this.model,'noticeContent','')

获取表单内容：

 this.model.noticeContent

重置：

 this.$refs.form.resetFields()

总体校验（提交）：

 this.$refs.form.validate(valid => {

            if (valid) {

//校验成功
}

})