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