Ant Design Vue ## From 表單

Ant Design Vue

Form 表單

表單填寫在日常工作中收錄信息比較常用，
antd 中 form 用於創建一個實體收集信息，並且可以對輸入的數據類型進行校驗。

1. 表單排列

這里指的是 表單的標簽和控件的排列方式

• 水平
• 垂直
• 行內

2. 表單域

表單·一定會·包含表單域， 表單域 可以是

• 輸入控件
• 標簽
• 下拉菜單
• 文本域等等
  antd 封裝了表單域 <Form.item />

注意點
1、如果使用 Form.create 處理表單使其具有自動收集數據並校驗的功能，建議使用jsx。<.jsx>https://typescript.bootcss.com/jsx.html

• 我不熟悉jsx語法，所以使用 template 方式使用form

2、如果不是使用Vue.use(Form)形式注冊的Form組件，你需要自行在main.js文件中將$form掛載到Vue原型上。Vue.prototype.$form = Form

3. 使用

<template>
  <a-form :form="form">
    <a-form-item label="Note">
      <a-input 
      v-decorator="['note', { rules: [{ required: true, message: 'Please input your note!' }] }]"
      >
    </a-form-item>
  </a-form>
</template>

4.apis 釋義

Form

1. :form="form"

動態數據綁定，這個沒啥說的，但是這里需要注意的data中的form的創建形式

• 直接指定一個Object對象{}
• 使用Form.create來創建
  • jsx方式 自己不熟悉，不用
  • template 方式使用。

我們先來說第二種，官方用的最多,上代碼

///.....vue 實例
  data() {
    return {
      form: this.$form.createForm(this, { name: 'coordinated' }),
    };
  },
//...

- form -官方文檔

form 經 Form.create() 包裝過的組件會自帶 this.form 屬性，如果使用 template 語法，可以使用 this.$form.createForm(this, options) 類型是 object 默認參數 無

- form -我的理解

• data中的form 是一個經過antd($form.create)方法包裝過的屬性

• 參數中的this 是 組件實例本身 與 其他配置中的this一樣使用

  • Form.create(options) | this.$form.createForm(this, options)

  <template>
    <a-form :form="form" />
  </template>
  <script>
    export default {
      beforeCreate() {
        this.form = this.$form.createForm(this, options);
      },
    };
  </script>
  

- Form.create(options) | this.$form.createForm(this, options) --> options api 理解

參數 options

• options: 只記錄與 template 用法相關
  • name---設置表單域內字段id的前綴
  • validateMessages 默認校驗信息，可用於把默認錯誤信息改為中文等，格式與 newMessages 返回值一致 Object { [nested.path]: String }
  • onValuesChange 任一表單域的值發生改變時的回調 (props, values) => void

- Form.create this.form 的apis

經過 Form.create 包裝的組件將會自帶 this.form 屬性，this.form 提供的 API 如下：

注意：使用 getFieldsValue,getFieldValue,setFieldsValue 等時，應確保對應的 field 已經用 getFieldDecorator 或 v-decorator 注冊過了。

如下：
<a-input
v-decorator="['note', { rules: [{ required: true, message: 'Please input your note!' }] }]"
>

1.getFieldDecorator 用於和表單進行雙向綁定，單文件 template 可以使用指令v-decorator進行綁定，詳見下方描述

• 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 來動態改變表單值。

this.form.getFieldDecorator(id, options) //通過裝飾id 此組件就是form.create裝飾過的了

v-decorator="[id, options]"

• 參數解釋

  -id,必填！！！輸入控件的唯一標志，支持嵌套式的寫法？是不是 html 標簽中 id 就可以作為唯一標志？？>>測試！！

  • options.getValueFromEvent 可以把 onChange 的參數（如 event）轉化為控件的值
    • 不再使用onChange作為同步方法，使用此配置項配置方法
  • options.initialValue 子節點的初始值，類型、可選值均由子節點決定
    • (注意：由於內部校驗時使用 === 判斷是否變化，建議使用變量緩存所需設置的值,而非直接使用字面量)
    • eg:{initialValue:value} value 是data中的變量或者父組件的變量
  • options.normalize 轉換默認的 value 給控件

   <template>
    <a-form
      :autoFormCreate="
        (form) => {
          this.form = form;
        }
      "
    >
      <a-form-item
        fieldDecoratorId="fruits"
        :fieldDecoratorOptions="{ normalize: this.normalizeAll }"
      >
        <a-checkbox-group :options="options" />
      </a-form-item>
    </a-form>
  </template>
  
  <script>
  export default {
    data() {
      return {
        options: [
          { label: "All", value: "All" },
          { label: "Apple", value: "Apple" },
          { label: "Pear", value: "Pear" },
          { label: "Orange", value: "Orange" },
        ],
      };
    },
    methods: {
      normalizeAll(value, prevValue = [], allValues) {
        console.log(allValues);
        if (value.indexOf("All") >= 0 && prevValue.indexOf("All") < 0) {
          return ["All", "Apple", "Pear", "Orange"];
        }
        if (value.indexOf("All") < 0 && prevValue.indexOf("All") >= 0) {
          return [];
        }
        return value;
      },
    },
  };
  </script>
  
  

  • options.preserve即便字段不再使用，也保留該字段的值

  • options.rules 校驗規則，參考下方:

    參數	說明	類型	默認值
    enum	枚舉類型	string	-
    message	校驗文案	string	-
    min	最小長度	number	-
    pattern	正則表達式校驗	RegExp	-
    required	是否必選	boolean	false
    transform	校驗前轉換字段值	function ( value) => transformedValue:any	-
    len	字段長度	number	-
    max	最大長度	number	-
    type	內建校驗類型，可選項	string	'string'
    validator	自定義校驗（注意，callback	必須被調用）	function (rule, value, callback)
    whitespace	必選時，空格是否會被視為錯誤	boolean	false

  • options.trigger 收集子節點的值的時機 觸發的方法 類型 string 默認值'change'

  • options.validateFirst 當某一規則校驗不通過時，是否停止剩下的規則的校驗 類型 boolean默認值 false

  • options.validateTrigger 校驗子節點值的時機 驗證子節點時觸發的方法 類型string|string[] 默認值'change'

  • options.valuePropName 子節點的值的屬性，如 Switch 的是 'checked'類型 string默認值 'value'

    • 有的組件的值並不是通過 value 獲取的，需要另外提供
    • <a-switch v-decorator="['switch', { valuePropName: 'checked' }]" />

2. getFieldError 獲取某個輸入控件的 Error 類型：-Function(name)

3. getFieldsError 獲取一組輸入控件的 Error ，如不傳入參數，則獲取全部組件的 Error 類型：-Function([names: string[]])

4. getFieldsValue 獲取一組輸入控件的值，如不傳入參數，則獲取全部組件的值 類型：-Function([fieldNames: string[]])

5. getFieldValue 獲取一個輸入控件的值 類型：-Function(fieldName: string)

6. isFieldsTouched 判斷是否任一輸入控件經歷過 getFieldDecorator 或 v-decorator 的值收集時機 options.trigger 類型：(names?: string[]) => boolean

7. isFieldTouched 判斷一個輸入控件是否經歷過 getFieldDecorator 或 v-decorator 的值收集時機 options.trigger 類型：(name: string) => boolean

8. isFieldValidating 判斷一個輸入控件是否在校驗狀態 類型：-Function(name)

9. resetFields 重置一組輸入控件的值（為 initialValue）與狀態，如不傳入參數，則重置所有組件 類型：-Function([names: string[]])

10. setFields 設置一組輸入控件的值與錯誤狀態。 類型：-Function({ [fieldName]: { value: any, errors: [Error] } })

11. setFieldsValue 設置一組輸入控件的值類型：-Function({ [fieldName]: value })

12. validateFields 校驗並獲取一組輸入域的值與 Error，若 fieldNames 參數為空，則校驗全部組件 類型：-Function([fieldNames: string[]], [options: object], callback: Function(errors, values))

13. validateFieldsAndScroll 與 validateFields 相似，但校驗完后，如果校驗不通過的菜單域不在可見范圍內，則自動滾動進可見范圍 類型：-參考 validateFields

• validateFields/validateFieldsAndScroll 用法：

const {
  form:{validateFields},
} = this
//1.簡單模式 只有回調函數 callback 下方有示例
validateFields((errors,values)=>{
  //...錯誤信息，驗證值
})
// 2.中等模式
validateFields(['field1', 'field2'], (errors, values) => {
  // ...驗證表單域名 - 不傳則校驗全部
});
//3.全負荷模式
validateFields(['field1', 'field2'], options, (errors, values) => {
  // ... options校驗規則
});

• options.first 若為 true，則每一表單域的都會在碰到第一個失敗了的校驗規則后停止校驗 類型：boolean 默認值 false
• options.firstFields 指定表單域會在碰到第一個失敗了的校驗規則后停止校驗 String[] []
• options.force 對已經校驗過的表單域，在 validateTrigger 再次被觸發時是否再次校驗 boolean f`alse
• options.scroll 定義 validateFieldsAndScroll 的滾動行為， Object {}

validateFields 的 callback 參數示例：

• errors

  {
    "userName": {
      "errors": [
        {
          "message": "Please input your username!",
          "field": "userName"
        }
      ]
    },
    "password": {
      "errors": [
        {
          "message": "Please input your Password!",
          "field": "password"
        }
      ]
    }
  
  }
  

• values

  {
    "userName": {
      "errors": [
        {
          "message": "Please input your username!",
          "field": "userName"
        }
      ]
    },
    "password": {
      "errors": [
        {
          "message": "Please input your Password!",
          "field": "password"
        }
      ]
    }
  }
  

---

2. hideRequiredMark 隱藏所有表單項的必選標記 Boolean false

3. labelAlign label 標簽的文本對齊方式 'left' |'right' 'right' 1.5.0

4. layout 表單布局 'horizontal'|'vertical'|'inline' 默認：'horizontal'

5. labelCol label 標簽布局，同 <a-col> 組件，設置 span offset 值，如 {span: 3, offset: 12} 或 sm: {span: 3, offset: 12} 類型：object

6. wrapperCol 需要為輸入控件設置布局樣式時，使用該屬性，用法同 labelCol object

7. selfUpdate 自定義字段更新邏輯，說明見下，需 1.3.17 版本以上 boolean false 1.3.17

8. colon 配置 Form.Item 的 colon 的默認值 (只有在屬性 layout 為 horizontal 時有效)類型boolean 默認值true 1.5.0