目录

form

表单。用于提交组件内的用户输入的switch、input、checkbox、slider、radio、picker。

当点击form表单中“form-type”为“submit”的button组件时,会将表单组件中的value值进行提交,需要在表单组件中加上name来作为key。

起始版本: 1.0.0

事件:

名称 类型 必填 描述
bindsubmit eventhandle 否 携带form中的数据触发submit事件。
bindreset eventhandle 否 表单重置时会触发reset事件。

示例:

hxml文件:

<form bindsubmit="formSubmit" bindreset="formReset">
  <view class="page-section page-section-gap">
    <view class="page-section-title">switch</view>
    <switch name="switch" />
  </view>
  <view class="page-section page-section-gap">
    <view class="page-section-title">radio</view>
    <radio-group name="radio">
      <label>
        <radio value="radio1" />选项一
      </label>
      <label>
        <radio value="radio2" />选项二
      </label>
    </radio-group>
  </view>
  <view class="page-section page-section-gap">
    <view class="page-section-title">checkbox</view>
    <checkbox-group name="checkbox">
      <label>
        <checkbox value="checkbox1" />选项一
      </label>
      <label>
        <checkbox value="checkbox2" />选项二
      </label>
    </checkbox-group>
  </view>
  <view class="page-section page-section-gap">
    <view class="page-section-title">slider</view>
    <slider value="50" name="slider" show-value></slider>
  </view>
  <view class="page-section">
    <view class="page-section-title">input</view>
    <view class="ascf-cells">
      <view class="ascf-cell ascf-cell_input">
        <view class="ascf-cell__bd" style="margin: 30rpx 30rpx">
          <input class="ascf-input" name="input" placeholder="这是一个输入框" />
        </view>
      </view>
    </view>
  </view>
  <view class="btn-area">
    <button style="margin: 30rpx 0" type="primary" formType="submit">
      Submit
    </button>
    <button style="margin: 30rpx 0" formType="reset">Reset</button>
  </view>
</form>

js文件:

Page({
  data: {
    formSubmitResult: '',
    formResetResult: ''
  },
  formSubmit(event) {
    // event.detail.value内容举例为:{"switch":false,"radio":"","checkbox":[],"slider":0,"input":""}
    console.info('form发生了submit事件,携带数据为:', event.detail.value);
    this.setData({
      formSubmitResult: event.detail.value
    });
  },
  formReset(event) {
    // event.detail内容举例为:{"target":{"tagName":"","id":"","offsetLeft":0,"offsetTop":0,"dataset":{}}}
    console.info('form发生了reset事件,携带数据为:', event.detail);
    this.setData({
      formResetResult: event.detail
    });
  }
});