bilibili小程序

使用小贴士

form

相关文档: 聊天工具模式

功能描述

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

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

属性说明

属性类型默认值必填说明最低版本
report-submitbooleanfalse否是否返回 formId 用于发送模板消息
report-submit-timeoutnumber0否等待一段时间（毫秒数）以确认 formId 是否生效。如果未指定这个参数，formId 有很小的概率是无效的（如遇到网络失败的情况）。指定这个参数将可以检测 formId 是否有效，以这个参数的时间作为这项检测的超时时间。如果失败，将返回 requestFormId:fail 开头的 formId
bindsubmiteventhandle否携带 form 中的数据触发 submit 事件，event.detail = {value : {'name': 'value'} , formId: ''}
bindreseteventhandle否表单重置时会触发 reset 事件
bindsubmitToGroupeventhandle否用户发送文本到聊天后触发，但不代表最终发送成功

发送文本到群示例代码

需结合 button 和 textarea 组件使用。 button 需要设置 form-type="submitToGroup"，此时点击按钮将会发送 textarea 的内容到聊天。

<form bind:submitToGroup="onSubmitToGroup">
  <textarea value="{{shareText}}" />
  <button
    form-type="submitToGroup"
    need-show-entrance="{{true}}"
    entrance-path=""
  ></button>
</form>

示例代码

//

使用内置 behaviors

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

bl://form-field

bl://form-field-group

bl://form-field-button

bl://form-field

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

属性名类型描述最低版本
nameString在表单中的字段名
value任意在表单中的字段值

代码示例：

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

bl://form-field-group

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

代码示例：

使 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: ["bl://form-field-group"],
});

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

bl://form-field-button

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

代码示例：

使 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: ["bl://form-field-button"],
});

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

← editorinput →