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 } })
		  }
		},