# form
基礎(chǔ)庫(kù) 1.0.0 開(kāi)始支持，低版本需做兼容處理。
微信 Windows 版：支持
微信 Mac 版：支持
微信 鴻蒙 OS 版：支持
相關(guān)文檔: 聊天工具模式
渲染框架支持情況：Skyline （使用最新 Nightly 工具調(diào)試）、WebView
# 功能描述
表單。將組件內(nèi)的用戶輸入的switch input checkbox slider radio picker 提交。
當(dāng)點(diǎn)擊 form 表單中 form-type 為 submit 的 button 組件時(shí)，會(huì)將表單組件中的 value 值進(jìn)行提交，需要在表單組件中加上 name 來(lái)作為 key。
# 屬性說(shuō)明
| 屬性 | 類(lèi)型 | 默認(rèn)值 | 必填 | 說(shuō)明 | 最低版本 |
|---|---|---|---|---|---|
| report-submit | boolean | false | 否 | 是否返回 formId 用于發(fā)送模板消息 | 1.0.0 |
| report-submit-timeout | number | 0 | 否 | 等待一段時(shí)間（毫秒數(shù)）以確認(rèn) formId 是否生效。如果未指定這個(gè)參數(shù)，formId 有很小的概率是無(wú)效的（如遇到網(wǎng)絡(luò)失敗的情況）。指定這個(gè)參數(shù)將可以檢測(cè) formId 是否有效，以這個(gè)參數(shù)的時(shí)間作為這項(xiàng)檢測(cè)的超時(shí)時(shí)間。如果失敗，將返回 requestFormId:fail 開(kāi)頭的 formId | 2.6.2 |
| bindsubmit | eventhandle | 否 | 攜帶 form 中的數(shù)據(jù)觸發(fā) submit 事件，event.detail = {value : {'name': 'value'} , formId: ''} | 1.0.0 | |
| bindreset | eventhandle | 否 | 表單重置時(shí)會(huì)觸發(fā) reset 事件 | 1.0.0 | |
| bindsubmitToGroup | eventhandle | 否 | 用戶發(fā)送文本到聊天后觸發(fā)，但不代表最終發(fā)送成功 | 3.7.8 |
# 發(fā)送文本到群示例代碼
需結(jié)合 button 和 textarea 組件使用。
button 需要設(shè)置 form-type="submitToGroup"，此時(shí)點(diǎn)擊按鈕將會(huì)發(fā)送 textarea 的內(nèi)容到聊天。
<form bind:submitToGroup="onSubmitToGroup">
<textarea value="{{shareText}}" />
<button
form-type="submitToGroup"
need-show-entrance="{{true}}"
entrance-path=""
></button>
</form>
# 示例代碼
# 使用內(nèi)置 behaviors
對(duì)于 form 組件，目前可以自動(dòng)識(shí)別下列內(nèi)置 behaviors:
wx://form-field
wx://form-field-group
wx://form-field-button
# wx://form-field
使自定義組件有類(lèi)似于表單控件的行為。 form 組件可以識(shí)別這些自定義組件，并在 submit 事件中返回組件的字段名及其對(duì)應(yīng)字段值。這將為它添加以下兩個(gè)屬性。
代碼示例： 在開(kāi)發(fā)者工具中預(yù)覽效果
// 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
從基礎(chǔ)庫(kù)版本 2.10.2 開(kāi)始提供支持。
代碼示例： 在開(kāi)發(fā)者工具中預(yù)覽效果
使 form 組件可以識(shí)別到這個(gè)自定義組件內(nèi)部的所有表單控件。 例如，頁(yè)面的結(jié)構(gòu)如下：
<form bindsubmit="submit">
<custom-comp></custom-comp>
<button form-type="submit">submit</button>
</form>
組件 custom-comp 自身結(jié)構(gòu)如下：
<input name="name" />
<switch name="student" />
如果組件 custom-comp 配置有：
Component({
behaviors: ['wx://form-field-group']
})
此時(shí)，表單的 submit 事件的 value 中將包含 name 和 student 兩個(gè)字段。
# wx://form-field-button
從基礎(chǔ)庫(kù)版本 2.10.3 開(kāi)始提供支持。
代碼示例： 在開(kāi)發(fā)者工具中預(yù)覽效果
使 form 組件可以識(shí)別到這個(gè)自定義組件內(nèi)部的 button ， 如果自定義組件內(nèi)部有設(shè)置了 form-type 的 button ，它將被組件外的 form 接受。 例如，頁(yè)面的結(jié)構(gòu)如下：
<form bindsubmit="submit">
<input name="name" placeholder="請(qǐng)輸入名字"></input>
<custom-comp></custom-comp>
</form>
組件 custom-comp 自身結(jié)構(gòu)如下：
<button form-type="submit">submit</button>
如果組件 custom-comp 配置有：
Component({
behaviors: ['wx://form-field-button']
})
此時(shí)點(diǎn)擊組件內(nèi)的 button ，將觸發(fā) form 的 submit 事件。