form

基础库 1.0.0 开始支持，低版本需做兼容处理。

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

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

示例代码

// 在开发者工具中预览效果

使用内置 behaviors

对于 form 组件，目前可以自动识别下列内置 behaviors:

wx://form-field

wx://form-field-group

wx://form-field-button

wx://form-field

使自定义组件有类似于表单控件的行为。 form 组件可以识别这些自定义组件，并在 submit 事件中返回组件的字段名及其对应字段值。这将为它添加以下两个属性。

代码示例： 在开发者工具中预览效果

// custom-form-field.js
Component({
 behaviors: ['wx://form-field'],
 data: {
   value: ''
 },
 methods: {
   onChange: function (e) {
     this.setData({
       value: e.detail.value,
     })
   }
 }
})

wx://form-field-group

从基础库版本 2.10.2 开始提供支持。

代码示例： 在开发者工具中预览效果

使 form 组件可以识别到这个自定义组件内部的所有表单控件。 例如，页面的结构如下：

<form bindsubmit="submit">
  <custom-comp></custom-comp>
  <button form-type="submit">submit</button>
</form>

组件 custom-comp 自身结构如下：

<input name="name" />
<switch name="student" />

如果组件 custom-comp 配置有：

Component({
 behaviors: ['wx://form-field-group']
})

此时，表单的 submit 事件的 value 中将包含 name 和 student 两个字段。

wx://form-field-button

从基础库版本 2.10.3 开始提供支持。

代码示例： 在开发者工具中预览效果

使 form 组件可以识别到这个自定义组件内部的 button ， 如果自定义组件内部有设置了 form-type 的 button ，它将被组件外的 form 接受。 例如，页面的结构如下：

<form bindsubmit="submit">
  <input name="name" placeholder="请输入名字"></input>
  <custom-comp></custom-comp>
</form>

组件 custom-comp 自身结构如下：

<button form-type="submit">submit</button>

如果组件 custom-comp 配置有：

Component({
 behaviors: ['wx://form-field-button']
})

此时点击组件内的 button ，将触发 form 的 submit 事件。