# form

Start from base library version 1.0.0. Please remaining backward compatible.

Form. That the user inside the component entersswitch input checkbox slider radio picker Submit.

When you click form In the form form-type for submit of button Component, the value Value, you need to add the name To act as key。

attribute	type	Default value	Required	Introductions	Minimum version
report-submit	boolean	false	no	Whether to return formId For sendingTemplate message	1.0.0
report-submit-timeout	number	0	no	Wait a period of time (milliseconds) to confirm formId Whether to take effect. If this parameter is not specified, formId There is a small probability that it will be invalid (as in the case of a network failure). Specifying this parameter will allow you to detect formId The time of this parameter is used as the timeout for this test. If it fails, returns requestFormId:fail Initial formId	2.6.2
bindsubmit	eventhandle		no	carry form Data triggering in submit Event, event.detail = {value : {'name': 'value'} , formId: ''}	1.0.0
bindreset	eventhandle		no	Triggered when the form is reset reset event	1.0.0

# sample code

// Preview with Developer Tool

# Use built-in behaviors

for form Components can now automatically identify the following built-in behaviors:

wx://form-field

wx://form-field-group

wx://form-field-button

# wx://form-field

Make custom components behave like form controls. form Components can identify these custom components and add a submit Event returns the field name of the component and its corresponding field value. This will add the following two properties to it.

Attribute name	type	describe	Minimum version
name	String	Field names in the form	1.6.7
value	Arbitrarily	Field values in the form	1.6.7

Code example: Preview with Developer Tool

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

# wx://form-field-group

From the base library version 2.10.2 Start providing support.

Code example: Preview with Developer Tool

send form Component recognizes all form controls within this custom component. For example, the page is structured as follows:

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

assembly custom-comp Its structure is as follows:

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

If the component custom-comp Configured with:

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

At this point, the form's submit Event value Will include name and student Two fields.

# wx://form-field-button

From the base library version 2.10.3 Start providing support.

Code example: Preview with Developer Tool

send form Component can identify the button ， If the custom component has settings inside form-type of button It will be checked by the form Accept. For example, the page is structured as follows:

<form bindsubmit="submit">
  <input name="name" Placeholder = "Please enter name"></input>
  <custom-comp></custom-comp>
</form>

assembly custom-comp Its structure is as follows:

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

If the component custom-comp Configured with:

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

At this point, click on the button , will trigger form of submit Events.