form

基礎(chǔ)庫(kù) 1.0.0 開始支持本組件。

表單，將組件內(nèi)的用戶輸入的 switch input checkbox slider radio picker 提交。

當(dāng)點(diǎn)擊 form 表單中 formType 為 submit 的 button 組件時(shí)，會(huì)將表單組件中的 value 值進(jìn)行提交，需要在表單組件中加上 name 來(lái)作為 key。

屬性說(shuō)明

效果示例

代碼示例

<view class="container">
  <view class="page-body">
    <form catchsubmit="formSubmit" catchreset="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" />選項(xiàng)一</label>
          <label><radio value="radio2" />選項(xiàng)二</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" />選項(xiàng)一</label>
          <label><checkbox value="checkbox2" />選項(xiàng)二</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="page-cells page-cells_after-title">
          <view class="page-cell page-cell_input">
            <view class="page-cell__bd">
              <input
                class="page-input"
                name="input"
                placeholder="這是一個(gè)輸入框"
              />
            </view>
          </view>
        </view>
      </view>

      <view class="btn-area">
        <button type="primary" formType="submit">提交</button>
        <button formType="reset">重設(shè)</button>
      </view>
    </form>
  </view>
</view>

Page({
  data: {
    pickerHidden: true,
    chosen: ""
  },
  pickerConfirm: function(e) {
    this.setData({
      pickerHidden: true
    });
    this.setData({
      chosen: e.detail.value
    });
  },
  pickerCancel: function(e) {
    this.setData({
      pickerHidden: true
    });
  },
  pickerShow: function(e) {
    this.setData({
      pickerHidden: false
    });
  },
  formSubmit: function(e) {
    console.log("form發(fā)生了submit事件，攜帶數(shù)據(jù)為：", e.detail.value);
  },
  formReset: function(e) {
    console.log("form發(fā)生了reset事件，攜帶數(shù)據(jù)為：", e.detail.value);
    this.setData({
      chosen: ""
    });
  }
});