FormCreate 提供了強大的組件聯動功能，通過 control 配置項實現組件的加載、顯示、禁用和必填等狀態控制。本文將詳細介紹組件聯動的配置項及其用法，並通過多個示例幫助您在實際業務場景中靈活應用這些功能。

源碼地址: Github | Gitee

數據結構

type Control =  Array<{
  //通過內置條件控制,和`handle`二選一
  value?: any;
  //內置的條件,可以和`value`組合使用
  condition?: '==' | '!=' | '<>' | '>' | '>=' | '<' | '<=' | 'in' | 'notIn' | 'on' | 'notOn' | 'between' | 'notBetween' | 'empty' | 'notEmpty';
  //自定義控制條件
  handle?: (val: any, api: Api) => boolean;
  //控制對應規則的顯示,禁用,必填
  method?: 'display' | 'disabled' | 'hidden' | 'required';
  //控制的字段
  rule: string[];
} | {
  //通過內置條件控制,和`handle`二選一
  value?: any;
  //內置的條件,可以和`value`組合使用
  condition?: '==' | '!=' | '<>' | '>' | '>=' | '<' | '<=' | 'in' | 'notIn' | 'on' | 'notOn' | 'between' | 'notBetween' | 'empty' | 'notEmpty';
  //自定義控制條件
  handle?: (val: any, api: Api) => boolean;
  //控制的規則
  rule: Rule[];
  //條件達成時,將`rule`添加到對應字段後面
  append?: string;
  //條件達成時,將`rule`添加到對應字段前面
  prepend?: string;
  //條件達成時,將`rule`添加到對應字段的子級, 不配置`append`和`prepend`時,默認當前規則
  child?: boolean;
}>

method 選項

• display: 控制組件的顯示狀態
• hidden: 控制組件的渲染狀態（無 DOM 元素）
• required: 控制組件是否必填
• disabled: 控制組件的禁用狀態

condition 選項

• ==: 全等
• !=: 不全等
• <>: 不全等
• \>: 組件值大於value(Number)
• \>=: 組件值大於等於value(Number)
• \>=: 組件值大於等於value(Number)
• \<: 組件值小於value(Number)
• \<=: 組件值小於等於value(Number)
• in: 組件值存在於value(Array)中
• notIn: 組件值不存在於value(Array)中
• on: value存在於組件值(Array)中
• notOn: value不存在於組件值(Array)中
• between: 組件值在value(Array)的區間中,組件值>value[0] && 組件值<value[1]
• notBetween: 組件值不在value(Array)的區間中
• empty: 組件值為空時
• notEmpty: 組件值不為空時
• pattern: 正則表達式驗證

屬性説明

• value : 當組件的值和value全等時加載rule中的組件

  {
      value:1,
      rule:[{type:'input', field:'field',title:'field'}]
  }

• handle Function : 當handle方法返回true時加載rule中的組件

  {
      handle:function(val, fApi){
          return val === 1
      },
      rule:[{type:'input', field:'field',title:'field'}]
  }

• rule string[]|Rule[] : 控制當前表單中對應的field/name是否顯示

  {
      value: 1,
      rule: ['field1', 'name2']
  }

• method string : 控制當前表單中對應的field/name是否禁用

  {
      value: 1,
      method: 'disabled',
      rule: ['field1', 'name2']
  }

• condition string : 當value!=組件值時加載rule中的組件

  {
      value: 1,
      condition: '!=',
      rule:[{type:'input', field:'field',title:'field'}]
  }

• append string : 將rule中的規則追加到goods_name後的位置

  {
      value:1,
      append:'goods_name',
      rule:[{type:'input', field:'field',title:'field'}]
  }

• prepend string : 將rule中的規則插入到goods_name前的位置

  {
      value:1,
      prepend:'goods_name',
      rule:[{type:'input', field:'field',title:'field'}]
  }

• child boolean : 將rule 插入到goods_name組件的children中

  {
      value:1,
      prepend:'goods_name',
      child: true,
      rule:[{type:'input', field:'field',title:'field'}]
  }

業務場景示例

根據單選框選擇控制表單顯示

在實際業務中，常常需要根據用户的選擇動態展示不同的表單字段。以下示例展示瞭如何使用 control 根據單選框的選擇值來控制其他字段的顯示與隱藏。

const rules = [
  {
    type: 'radio',
    field: 'select_option',
    title: '選擇類型',
    value: 'A',
    options: [
      { label: '選項A', value: 'A' },
      { label: '選項B', value: 'B' }
    ],
    control: [
      {
        value: 'A',
        rule: [{ type: 'input', field: 'input_A', title: '輸入A的內容' }]
      },
      {
        value: 'B',
        rule: [{ type: 'input', field: 'input_B', title: '輸入B的內容' }]
      }
    ]
  }
];

在這個例子中，當用户選擇 選項A 時，會動態顯示一個名為 input_A 的輸入框；而當選擇 選項B 時，則顯示 input_B 輸入框。

根據用户輸入的值控制字段是否必填

有時候，某個字段的必填狀態取決於用户在另一個字段中的輸入。例如，如果用户輸入的金額超過某個值，系統會要求提供額外的備註。

const rules = [
  {
    type: 'input',
    field: 'amount',
    title: '金額',
    value: 0,
    control: [
      {
        handle: (val) => val > 100,
        method: 'required',
        rule: ['remarks']
      }
    ]
  },
  {
    type: 'input',
    field: 'remarks',
    title: '備註'
  }
];

在此場景中，當 amount 字段的值大於 100 時，remarks 字段將變為必填項。

根據複選框選中情況動態顯示多個字段

當用户在複選框中選擇多個選項時，表單可以動態顯示與選項相關聯的多個字段。

const rules = [
  {
    type: 'checkbox',
    field: 'interests',
    title: '選擇興趣',
    options: [
      { label: '閲讀', value: 'reading' },
      { label: '運動', value: 'sports' },
      { label: '音樂', value: 'music' }
    ],
    control: [
      {
        value: 'reading',
        condition: 'on',
        rule: [{ type: 'input', field: 'favorite_books', title: '喜歡的書籍' }]
      },
      {
        value: 'sports',
        condition: 'on',
        rule: [{ type: 'input', field: 'favorite_sport', title: '喜歡的運動' }]
      },
      {
        value: 'music',
        condition: 'on',
        rule: [{ type: 'input', field: 'favorite_music', title: '喜歡的音樂類型' }]
      }
    ]
  }
];

此示例中，用户選擇 閲讀、運動 或 音樂 時，將分別顯示對應的輸入框，要求用户填寫具體的內容。

根據日期選擇控制時間選擇器的可用狀態

在一些場景下，用户選擇的日期可能會影響表單中其他字段的可用性。例如，選擇未來日期時，時間選擇器才會啓用。

const rules = [
  {
    type: 'datePicker',
    field: 'date',
    title: '選擇日期',
    value: '',
    control: [
      {
        handle: (val) => new Date(val) > new Date(),
        method: 'disabled',
        rule: ['time']
      }
    ]
  },
  {
    type: 'timePicker',
    field: 'time',
    title: '選擇時間'
  }
];

在該場景中，只有在用户選擇了未來日期時，time 字段的時間選擇器才會啓用。

根據用户選擇的商品類別動態加載對應的屬性字段

假設一個電商系統中，用户在添加商品時需要選擇商品的類別，不同類別的商品有不同的屬性。可以通過組件聯動功能動態加載對應的屬性字段。

const rules = [
  {
    type: 'select',
    field: 'category',
    title: '商品類別',
    options: [
      { label: '電子產品', value: 'electronics' },
      { label: '服裝', value: 'clothing' }
    ],
    control: [
      {
        value: 'electronics',
        rule: [
          { type: 'input', field: 'brand', title: '品牌' },
          { type: 'input', field: 'model', title: '型號' }
        ]
      },
      {
        value: 'clothing',
        rule: [
          { type: 'input', field: 'size', title: '尺寸' },
          { type: 'input', field: 'material', title: '材質' }
        ]
      }
    ]
  }
];

在這個例子中，選擇 電子產品 會動態顯示品牌和型號字段，而選擇 服裝 則會顯示尺寸和材質字段。

基於多條件組合控制字段顯示

有時，表單字段的顯示取決於多個條件的組合。以下示例展示瞭如何使用 control 配置多條件邏輯來控制字段的顯示：

const rules = [
  {
    type: 'select',
    field: 'subscription_type',
    title: '選擇訂閲類型',
    options: [
      { label: '基礎版', value: 'basic' },
      { label: '高級版', value: 'premium' }
    ]
  },
  {
    type: 'input',
    field: 'discount_code',
    title: '折扣代碼'
  },
  {
    type: 'input',
    field: 'credit_card',
    title: '信用卡號',
    link: ['discount_code'],
    control: [
      {
        value: 'premium',
        handle: (val, fApi) => {
          const discountCode = fApi.getValue('discount_code');
          return val === 'premium' && discountCode === 'VIP';
        },
        method: 'required',
        rule: ['credit_card']
      }
    ]
  }
];

在這個例子中，當用户選擇“高級版”訂閲並且輸入“VIP”折扣代碼時，“信用卡號”字段會被設為必填項。這是一個多條件組合控制字段顯示的典型場景。