Form 表单

表单组件，包含 <Checkbox />、<Radio />、<Switch />、<Input />、<Rater />、<InputNumber />、<Textarea />、<Slider /> 等元素。

  • 表单元素需要使用 <Field /> 来包裹，数据同步将被 <Form /> 接管
  • 无需再使用 onChange 来做同步，但还是可以继续监听 onChange 等事件
  • 无需再使用 value 或 defaultValue 等属性来设置元素的值
  • 如果使用 Wux Weapp 提供的 <Form /> 表单，可以通过 getFieldsValue 来获取表单的值，也可以通过 setFieldsValue 来动态改变表单值
  • 如果使用默认的 <form/> 表单，当点击 <form/> 表单中 form-type 为 submit 的 <button/> 组件时，会将表单组件中的 value 值进行提交

使用指南

在 page.json 中引入组件

  1. {
  2.     "navigationBarTitleText": "Form",
  3.     "usingComponents": {
  4.         "wux-cell-group": "../../dist/cell-group/index",
  5.         "wux-cell": "../../dist/cell/index",
  6.         "wux-form": "../../dist/form/index",
  7.         "wux-field": "../../dist/field/index",
  8.         "wux-slider": "../../dist/slider/index",
  9.         "wux-rater": "../../dist/rater/index",
  10.         "wux-input-number": "../../dist/input-number/index",
  11.         "wux-textarea": "../../dist/textarea/index",
  12.         "wux-input": "../../dist/input/index",
  13.         "wux-checkbox-group": "../../dist/checkbox-group/index",
  14.         "wux-checkbox": "../../dist/checkbox/index",
  15.         "wux-radio-group": "../../dist/radio-group/index",
  16.         "wux-radio": "../../dist/radio/index",
  17.         "wux-switch": "../../dist/switch/index"
  18.     }
  19. }

示例

  1. <view class="page">
  2.     <view class="page__hd">
  3.         <view class="page__title">Form</view>
  4.         <view class="page__desc">表单</view>
  5.     </view>
  6.     <view class="page__bd">
  7.         <view class="sub-title">Default Form</view>
  8.         <form bindsubmit="formSubmit">
  9.             <wux-checkbox-group name="checkbox" value="{{ checkbox }}" title="Checkbox" bind:change="onCheckboxChange">
  10.                 <wux-checkbox title="Java" value="1" />
  11.                 <wux-checkbox title="PHP" value="2" />
  12.             </wux-checkbox-group>
  13.             <wux-radio-group name="radio" value="{{ radio }}" title="Radio" bind:change="onRadioChange">
  14.                 <wux-radio title="Java" value="1" />
  15.                 <wux-radio title="PHP" value="2" />
  16.             </wux-radio-group>
  17.             <wux-cell-group title="Switch">
  18.                 <wux-cell>
  19.                     <wux-switch name="switch" slot="footer" value="{{ switch }}" bind:change="onSwitchChange" />
  20.                 </wux-cell>
  21.             </wux-cell-group>
  22.             <wux-cell-group title="Input">
  23.                 <wux-cell hover-class="none">
  24.                     <wux-field name="input" initialValue="123">
  25.                         <wux-input label="Input" />
  26.                     </wux-field>
  27.                 </wux-cell>
  28.             </wux-cell-group>
  29.             <wux-cell-group title="Rater">
  30.                 <wux-cell hover-class="none">
  31.                     <wux-field name="rater" initialValue="{{ 2 }}" slot="footer">
  32.                         <wux-rater />
  33.                     </wux-field>
  34.                 </wux-cell>
  35.             </wux-cell-group>
  36.             <wux-cell-group title="InputNumber">
  37.                 <wux-cell hover-class="none">
  38.                     <wux-field name="inputNumber" initialValue="{{ 20 }}">
  39.                         <wux-input-number />
  40.                     </wux-field>
  41.                 </wux-cell>
  42.             </wux-cell-group>
  43.             <wux-cell-group title="Textarea">
  44.                 <wux-cell hover-class="none">
  45.                     <wux-field name="textarea" initialValue="456">
  46.                         <wux-textarea rows="3" />
  47.                     </wux-field>
  48.                 </wux-cell>
  49.             </wux-cell-group>
  50.             <wux-cell-group title="Slider">
  51.                 <wux-cell hover-class="none">
  52.                     <wux-field name="slider" initialValue="{{ [10, 80] }}">
  53.                         <wux-slider />
  54.                     </wux-field>
  55.                 </wux-cell>
  56.             </wux-cell-group>
  57.             <view class="btn-area">
  58.                 <button formType="submit">Default Form Submit</button>
  59.             </view>
  60.         </form>
  61.         <view class="sub-title">Wux Form</view>
  62.         <wux-form id="wux-form" bind:change="onChange">
  63.             <wux-field name="checkbox" initialValue="{{ checkbox }}">
  64.                 <wux-checkbox-group>
  65.                     <wux-checkbox title="Java" value="1" />
  66.                     <wux-checkbox title="PHP" value="2" />
  67.                 </wux-checkbox-group>
  68.             </wux-field>
  69.             <wux-field name="radio" initialValue="{{ radio }}">
  70.                 <wux-radio-group title="Radio">
  71.                     <wux-radio title="Java" value="1" />
  72.                     <wux-radio title="PHP" value="2" />
  73.                 </wux-radio-group>
  74.             </wux-field>
  75.             <wux-cell-group title="Switch">
  76.                 <wux-cell>
  77.                     <wux-field name="switch" initialValue="{{ switch }}" valuePropName="inputChecked" slot="footer">
  78.                         <wux-switch />
  79.                     </wux-field>
  80.                 </wux-cell>
  81.             </wux-cell-group>
  82.             <wux-cell-group title="Input">
  83.                 <wux-cell hover-class="none">
  84.                     <wux-field name="input" initialValue="123">
  85.                         <wux-input label="Input" />
  86.                     </wux-field>
  87.                 </wux-cell>
  88.             </wux-cell-group>
  89.             <wux-cell-group title="Rater">
  90.                 <wux-cell hover-class="none">
  91.                     <wux-field name="rater" initialValue="{{ 2 }}" slot="footer">
  92.                         <wux-rater />
  93.                     </wux-field>
  94.                 </wux-cell>
  95.             </wux-cell-group>
  96.             <wux-cell-group title="InputNumber">
  97.                 <wux-cell hover-class="none">
  98.                     <wux-field name="inputNumber" initialValue="{{ 20 }}">
  99.                         <wux-input-number />
  100.                     </wux-field>
  101.                 </wux-cell>
  102.             </wux-cell-group>
  103.             <wux-cell-group title="Textarea">
  104.                 <wux-cell hover-class="none">
  105.                     <wux-field name="textarea" initialValue="456">
  106.                         <wux-textarea rows="3" />
  107.                     </wux-field>
  108.                 </wux-cell>
  109.             </wux-cell-group>
  110.             <wux-cell-group title="Slider">
  111.                 <wux-cell hover-class="none">
  112.                     <wux-field name="slider" initialValue="{{ [10, 80] }}">
  113.                         <wux-slider />
  114.                     </wux-field>
  115.                 </wux-cell>
  116.             </wux-cell-group>
  117.             <view class="btn-area">
  118.                 <button bindtap="onSubmit">Wux Form Submit</button>
  119.                 <button bindtap="onReset">Wux Form Reset</button>
  120.             </view>
  121.         </wux-form>
  122.     </view>
  123. </view>
  1. import { $wuxForm } from '../../dist/index'
  3. Page({
  4.     data: {
  5.         checkbox: ['1'],
  6.         radio: '1',
  7.         switch: true,
  8.         disabled: false,
  9.     },
  10.     onCheckboxChange(e) {
  11.         const { value } = e.detail
  12.         const data = this.data.checkbox
  13.         const index = data.indexOf(value)
  14.         const checkbox = index === -1 ? [...data, value] : data.filter((n) => n !== value)
  16.         this.setData({ checkbox })
  17.     },
  18.     onRadioChange(e) {
  19.         this.setData({ radio: e.detail.value })
  20.     },
  21.     onSwitchChange(e) {
  22.         this.setData({ switch: e.detail.value })
  23.     },
  24.     formSubmit(e) {
  25.         console.log('Default Form Submit \n', e.detail.value)
  26.     },
  27.     onSubmit() {
  28.         const { getFieldsValue, getFieldValue, setFieldsValue } = $wuxForm()
  29.         const value = getFieldsValue()
  31.         console.log('Wux Form Submit \n', value)
  32.     },
  33.     onChange(e) {
  34.         const { form, changedValues, allValues } = e.detail
  36.         console.log('onChange \n', changedValues, allValues)
  37.     },
  38.     onReset() {
  39.         const { getFieldsValue, setFieldsValue } = $wuxForm()
  40.         const fields = getFieldsValue()
  42.         for (let item in fields) {
  43.             if ({}.hasOwnProperty.call(fields, item)) {
  44.                 if (Array.isArray(fields[item])) {
  45.                     fields[item] = []
  46.                     if (item === 'slider') {
  47.                         fields[item] = [10, 80]
  48.                     }
  49.                 } else if (typeof fields[item] === 'boolean') {
  50.                     fields[item] = false
  51.                 } else if (typeof fields[item] === 'number') {
  52.                     fields[item] = 0
  53.                 } else {
  54.                     fields[item] = ''
  55.                 }
  56.             }
  57.         }
  59.         setFieldsValue({
  60.             ...fields,
  61.         })
  62.     },
  63. })

视频演示

Form

API

Form props

参数 类型 描述 默认值
bind:change function 任一表单元素的值发生改变时的回调函数 -

Field props

参数 类型 描述 默认值
name string 在表单中的字段名 -
initialValue any 子节点的初始值 -
valuePropName string 子节点的值的属性，如 Switch 的是 inputChecked inputValue
trigger string 收集子节点的值的时机 onChange

Form.method

参数 类型 描述 默认值
getFieldsValue function 获取一组输入控件的值，如不传入参数，则获取全部组件的值 -
getFieldValue function 获取一个输入控件的值 -
setFieldsValue function 设置一组输入控件的值 -
setFields function 设置一组输入控件的值 -
resetFields function 重置一组输入控件的值（为 initialValue）与状态，如不传入参数，则重置所有组件 -

!> 该组件主要依靠 JavaScript 主动调用，所以一般只需在 wxml 中添加一个组件，并设置 id 为 #wux-form 或其他，之后在 page.js 中调用 $wuxForm(id) 获取匹配到的第一个组件实例对象。

  1. const { getFieldsValue, setFieldsValue } = $wuxForm()
  2. const fields = getFieldsValue()