antdVue 中的form

表单元素排列：

1. layout：'horizontal' - 水平排列：标签和表单控件水平排列；（默认）
2. 'vertical' - 垂直排列：标签和表单控件上下垂直排列；
3. 'inline' - 行内排列：表单项水平行内排列。

表单布局：

1. labelCol ： label 标签布局，同 <Col> 组件，设置 span offset 值，如 {span: 3, offset: 12}
2. wrapperCol ：需要为输入控件设置布局样式时，使用该属性，用法同 labelCol

表单双向绑定：

1. 使用指令v-decorator进行绑定

• v-decorator的方式去给每个项去注册，这样才能通过组件去拉取表单的数据，同时对必填项做校验；
• v-decorator="[id, options]"

  • id：必填输入控件唯一标志。支持嵌套式的写法。
  • ptions:各种功能集合{}，常用的有：rules，校验规则。 initialValue：子节点的初始值，
    类型、可选值均由子节点决定,以及其他常用的

	<template>
	  <a-form @submit="handleOk" :form="form">
	    <a-form-item
	        :labelCol="labelCol" // 排列样式
	        :wrapperCol="wrapperCol"
	        label='客户姓名：'
	      >
	      <a-input
	        v-decorator="[
	          'name', // 给表单赋值或拉取表单时，该input对应的key
	          {rules: [{ required: true, message: '请输入客户名称!' }]}
	        ]"
	        placeholder="请输入客户名称"/>
	    </a-form-item>
	  </a-form>
	</template>

	export default {
	  data() {
	    return {
	      form: this.$form.createForm(this), // 只有这样注册后，才能通过表单拉取数据
	    }
	  }
	}

2. getFieldDecorator 方法 用于和表单进行双向绑定

• getFieldDecorator(id, options)

• id是必填参数，表示输入控件唯一标志 string, options的值同上一致。
• 使用了之后，设置表单的值和获取表单的值不能再用setState
• 默认值可以用 getFieldDecorator 或 v-decorator 里的 initialValue。
• 使用 this.form.setFieldsValue 来动态改变表单值。

	beforeCreate(){
		this.form =  this.$form.createForm(this,  { name:  'dynamic_form_item'});
		this.form.getFieldDecorator('keys',  { initialValue:  [], preserve:  true  });  },
		//keys=>必填输入控件唯一标志。支持嵌套式的写法
		//options.initialValue => 子节点的初始值
		//options.preserve => 即便字段不再使用，也保留该字段的值
	}

form的属性

• 经 Form.create() 包装过的组件会自带 this.form 属性，jsx ,react中的使用方法为主
• 如果使用 template 语法，可以使用 this.$form.createForm(this, options) vue 常用的

单文件 template 使用方式

    <template>  
		<a-form :form="form" />  
	</template>  
	<script> 
		export default {
			beforeCreate() { 
				this.form = this.$form.createForm(this, options);  //这句话是必须的！！！
			}, 
		}
	</script>
		//或者在data中也可以
		//form = this.$form.createForm(this);  

获取表单的值

• 获取一组输入控件的值，如不传入参数，则获取全部组件的值

	const fields = this.form.getFieldsValue()
	// fields 就是组件空控件所有的值

• 获取一个输入控件的值

    const { tableHeaderCoverForm } = this;
    const typeArr = tableHeaderCoverForm.getFieldValue('type')

校验拉取表单数据的方法

• 通过validateFields的方法，能够校验必填项是否有值，若无，则页面会给出警告！

	this.form.validateFields((err, values) => {
	  if (err) {
	    // 这里做逻辑处理
	    console.log(values) // { name: '' }
	  }
	}

清空表单的方法

• 执行this.form.resetFields()，则会将表单清空。

给表单赋值

• setFieldsValue，拉取表单的时候才能拉取到值，其他设置默认值的方式，拉取表单时都无法获取到默认值。设置一组输入控件的值

使用一：
	 this.form.setFieldsValue({
	   name: '设置值'
	 })
使用二：
  this.tableHeaderCoverForm.setFieldsValue({keys:keys},'keys')
使用三：
  this.$nextTick(() => {
	this.settleDomainForm.setFieldsValue(pick({
		customerId:this.model.settleDomain.customerId,
		customerName:this.model.settleDomain.customerName,
		exceptionRemark:this.model.settleDomain.exceptionRemark,
	   },'customerId','customerName','exceptionRemark'))
 })
	 

表单中添加自定义校验

• 现在给表单添加自定义校验的方式，是从你开始输入时就在校验，讨厌的警告一直存在，直到你输入完整才会消失，个人觉得这种方式不太友好！

		<a-form-item
		  v-bind="formItemLayout"
		  label="E-mail"
		>
		  <a-input
		    v-decorator="[
		      'email',
		      {
		        rules: [{
		          type: 'email', message: 'The input is not valid E-mail!',
		        }, {
		          required: true, message: 'Please input your E-mail!',
		        }]
		      }
		    ]"
		  />
		</a-form-item>

• 当输入框失去焦点后再去校验是否正确

		<a-form-item
		  :labelCol="labelCol"
		  :wrapperCol="wrapperCol"
		  label='手机：'
		>
		<a-input
		  type="number"
		  v-decorator="[
		    'phone',
		    {
		      rules: [
		        { required: false, message: '请输入手机号码!' },]
		    },
		  ]"
		  @blur="validatePhoneBlur"
		  placeholder='请输入手机号码' />
		</a-form-item>

		// 校验事件
		validatePhoneBlur(e) {
		  const validatePhoneReg = /^1\d{10}$/
		  if (e.target.value && !validatePhoneReg.test(e.target.value)) {
		    const arr = [{
		      message: '您输入的手机格式不正确!',
		      field: 'phone',
		    }]
		    this.form.setFields({ phone: { value: e.target.value, errors: arr } })
		  }
		},