{"meta":"<h2 id=\"Guide\">Guide <a class=\"header-anchor scroll-count-item\" href=\"#Guide\" data-scroll-id=\"Guide\">#</a></h2>\n<h3 id=\"When To Use\">When To Use <a class=\"header-anchor scroll-count-item\" href=\"#When To Use\" data-scroll-id=\"When To Use\">#</a></h3>\n<p>Form layout, validation, data submission operations used.</p>\n<h3 id=\"Note\">Note <a class=\"header-anchor scroll-count-item\" href=\"#Note\" data-scroll-id=\"Note\">#</a></h3>\n<ul>\n<li>Components do not use the keyword <code>nodeName</code> as the name and input`s id.</li>\n<li>Form uses <code>size=&quot;medium&quot;</code> by default and controls the size of all components in the FormItem. If you want to modify the component size, set <code>&lt;FormItem size=&quot;small&quot; &gt;</code>.</li>\n<li>In the vertical layout form, if the text (generally <code>&lt;p&gt;</code> tag) or component deviates upwards, it can be adjusted with <code>className=&quot;next-form-text-align&quot;</code></li>\n<li>It must be a component wrapped directly by <code>&lt;FormItem&gt;</code> to display the error message. If the error did not show, check whether there are multiple levels DOM. For example, <code>&lt;FormItem&gt;&lt;div&gt;&lt;Input/&gt;&lt;/div&gt;&lt;/FormItem&gt;</code> is unable to display error message.</li>\n<li>could use <code>&lt;Form field={false}&gt;</code> to close inner field</li>\n</ul>\n","api":"<h2 id=\"API\">API <a class=\"header-anchor scroll-count-item\" href=\"#API\" data-scroll-id=\"API\">#</a></h2>\n<h3 id=\"Form\">Form <a class=\"header-anchor scroll-count-item\" href=\"#Form\" data-scroll-id=\"Form\">#</a></h3>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n<th>Supported Version</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>inline</td>\n<td>Inline</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>size</td>\n<td>When an Item within a Form has a specific size configuration, that customization overrides the general size setting of the Form. Additionally, if a component is integrated with an Item, the component&apos;s individual size property does not apply</td>\n<td>&apos;large&apos; | &apos;medium&apos; | &apos;small&apos;</td>\n<td>medium</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>fullWidth</td>\n<td>Is the width of form</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>labelAlign</td>\n<td>The position of the label, if labelCol and wrapperCol are not set, defaults to having the label positioned above.</td>\n<td>&apos;top&apos; | &apos;left&apos; | &apos;inset&apos;</td>\n<td>left</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>labelTextAlign</td>\n<td>The alignment of the label on the left and right</td>\n<td>&apos;left&apos; | &apos;right&apos;</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>field</td>\n<td>Field instance, pass false to disable</td>\n<td>false | NextField | null</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>saveField</td>\n<td>Save the Form automatically generated field object</td>\n<td>(field?: NextField | null) =&gt; void</td>\n<td>func.noop</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>labelCol</td>\n<td>Control the labelCol of the first level Item</td>\n<td>ColProps</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>wrapperCol</td>\n<td>Control the wrapperCol of the first level Item</td>\n<td>ColProps</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onSubmit</td>\n<td>Triggered when there is an element with <code>htmlType=&quot;submit&quot;</code> in the form</td>\n<td>FormEventHandler&lt;HTMLFormElement&gt;</td>\n<td>function preventDefault(e) { e.preventDefault(); }</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>children</td>\n<td>Child elements</td>\n<td>ReactNode</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>value</td>\n<td>Form value</td>\n<td>FieldValues</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>onChange</td>\n<td>Form change callback<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>values</em>: Form values<br><em>item</em>: Form item, item.name: The name of the component that changed, item.value: The new data of the changed component, item.field: The field instance associated with the changed component</td>\n<td>(<br> values: FieldValues | undefined,<br> item: { name: string; value: string; field: NextField | null }<br> ) =&gt; void</td>\n<td>func.noop</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>component</td>\n<td>Set the tag type</td>\n<td>ElementType</td>\n<td>&apos;form&apos;</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>fieldOptions</td>\n<td>Field configuration, will be used when initializing the field instance in Form</td>\n<td>FieldOption</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>device</td>\n<td>Preset screen width</td>\n<td>&apos;desktop&apos; | &apos;phone&apos; | &apos;tablet&apos;</td>\n<td>&apos;desktop&apos;</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>responsive</td>\n<td>Whether to enable the built</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>1.19</td>\n</tr>\n<tr>\n<td>isPreview</td>\n<td>Whether to enable preview</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>1.19</td>\n</tr>\n<tr>\n<td>useLabelForErrorMessage</td>\n<td>Whether to use the label to replace the name of the error message</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>1.20</td>\n</tr>\n<tr>\n<td>preferMarginToDisplayHelp</td>\n<td>Prefer to display help with margin</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>1.26.37</td>\n</tr>\n<tr>\n<td>colon</td>\n<td>Indicates whether to display a colon after the label</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>1.22</td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Whether to disable</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Form Item\">Form.Item <a class=\"header-anchor scroll-count-item\" href=\"#Form Item\" data-scroll-id=\"Form Item\">#</a></h3>\n<p>&#x624B;&#x52A8;&#x4F20;&#x9012;&#x4E86; wrapCol labelCol &#x4F1A;&#x4F7F;&#x7528; Grid &#x8F85;&#x52A9;&#x5E03;&#x5C40;; labelAlign=&apos;top&apos; &#x4F1A;&#x5F3A;&#x5236;&#x7981;&#x7528; Grid</p>\n<p>Manual passing of wrapCol labelCol will use Grid auxiliary layout; labelAlign=&apos;top&apos; will force disable Grid</p>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n<th>Supported Version</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>labelCol</td>\n<td>Label label layout, same as <code>&lt;Col&gt;</code> component, set span offset value, like {span: 8, offset: 16}, only works in vertical forms</td>\n<td>ColProps</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>wrapperCol</td>\n<td>Customized layout for input controls, usage same as labelCol</td>\n<td>ColProps</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>help</td>\n<td>Customized prompt information, if not set, will be automatically generated according to the validation rules</td>\n<td>ReactNode</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>name</td>\n<td>Field name, default assigned to the first child</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>extra</td>\n<td>Extra prompt information, similar to help, when both error information and prompt text are required, use this</td>\n<td>ReactNode</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>validateState</td>\n<td>Validate state, if not set, will be automatically generated according to the validation rules</td>\n<td>&apos;error&apos; | &apos;success&apos; | &apos;loading&apos; | &apos;warning&apos;</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>hasFeedback</td>\n<td>Used with validateState property, whether to display the success/loading icon of the success/loading state, currently only the Input component supports this</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>children</td>\n<td>Node or function(values)</td>\n<td>ReactNode | ((values: FieldValues) =&gt; void)</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>fullWidth</td>\n<td>Whether the form component width of the single Item is 100%</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>labelAlign</td>\n<td>Label position, if not set labelCol and wrapperCol, the default is label on top</td>\n<td>&apos;top&apos; | &apos;left&apos; | &apos;inset&apos;</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>labelTextAlign</td>\n<td>Label left right alignment</td>\n<td>&apos;left&apos; | &apos;right&apos;</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>required</td>\n<td>[Form Validation] Cannot be empty</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>asterisk</td>\n<td>Whether to display the star of required</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>requiredMessage</td>\n<td>Required custom error information</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>requiredTrigger</td>\n<td>Required custom trigger mode, the default value is onChange, native events can also use onChange/onBlur/onFocus/...</td>\n<td>string | Array&lt;string&gt;</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>min</td>\n<td>[Form Validation] Minimum value</td>\n<td>number</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>max</td>\n<td>[Form Validation] Maximum value</td>\n<td>number</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>minmaxMessage</td>\n<td>Min/max custom error information</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>minmaxTrigger</td>\n<td>Min/max custom trigger mode</td>\n<td>string | Array&lt;string&gt;</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>minLength</td>\n<td>[Form Validation] String minimum length / Array minimum number</td>\n<td>number</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>maxLength</td>\n<td>[Form Validation] String maximum length / Array maximum number</td>\n<td>number</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>minmaxLengthMessage</td>\n<td>MinLength/maxLength custom error information</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>minmaxLengthTrigger</td>\n<td>MinLength/maxLength custom trigger mode</td>\n<td>string | Array&lt;string&gt;</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>length</td>\n<td>[Form Validation] String exact length / Array exact number</td>\n<td>number</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>lengthMessage</td>\n<td>Length custom error information</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>lengthTrigger</td>\n<td>Length custom trigger mode</td>\n<td>string | Array&lt;string&gt;</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>pattern</td>\n<td>Regular expression</td>\n<td>unknown</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>patternMessage</td>\n<td>Pattern custom error information</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>patternTrigger</td>\n<td>Pattern validate when triggered, the default value is onChange, native events can also use onChange/onBlur/onFocus/...</td>\n<td>string | Array&lt;string&gt;</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>format</td>\n<td>[Form Validation] four common patterns</td>\n<td>&apos;number&apos; | &apos;email&apos; | &apos;url&apos; | &apos;tel&apos;</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>formatMessage</td>\n<td>Format custom error information</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>formatTrigger</td>\n<td>Format validate when triggered, the default value is onChange, native events can also use onChange/onBlur/onFocus/...</td>\n<td>string | Array&lt;string&gt;</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>validator</td>\n<td>Custom validation function</td>\n<td>Validator</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>validatorTrigger</td>\n<td>Validator custom trigger mode, the default value is onChange, native events can also use onChange/onBlur/onFocus/...</td>\n<td>string | Array&lt;string&gt;</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>autoValidate</td>\n<td>Whether to automatically trigger validation when data is modified</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>device</td>\n<td>Preset screen width</td>\n<td>&apos;desktop&apos; | &apos;phone&apos; | &apos;tablet&apos;</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>colSpan</td>\n<td>In response layout mode, how many columns does the form item occupy</td>\n<td>number</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>labelWidth</td>\n<td>In response layout mode, and the label is on the left, how wide is the label</td>\n<td>number | string</td>\n<td>100</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>isPreview</td>\n<td>Whether to open preview</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>renderPreview</td>\n<td>Preview mode rendering content<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>value</em>: Based on the value type of the wrapped component</td>\n<td>(values: unknown) =&gt; unknown</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>errorMessageName</td>\n<td>Replacement of the name field of the check information, useLabelForErrorMessage is enabled when the label priority is higher</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>useLabelForErrorMessage</td>\n<td>Whether to use label to replace the name field of the check information</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>preferMarginToDisplayHelp</td>\n<td>Prefer margin space to display help</td>\n<td>boolean</td>\n<td>false</td>\n<td></td>\n<td>1.26.37</td>\n</tr>\n<tr>\n<td>colon</td>\n<td>Indicates whether to display the colon after the label</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>disabled</td>\n<td>Is the form disabled</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>valueName</td>\n<td>Child element value name</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n<tr>\n<td>type</td>\n<td>-</td>\n<td>string</td>\n<td>-</td>\n<td></td>\n<td>-</td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Form Submit\">Form.Submit <a class=\"header-anchor scroll-count-item\" href=\"#Form Submit\" data-scroll-id=\"Form Submit\">#</a></h3>\n<p>&#x7EE7;&#x627F; Button API</p>\n<p>Inherit Button API</p>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>onClick</td>\n<td>Triggered after clicking submit<br><br><strong>signature</strong>:<br><strong>params</strong>:<br><em>value</em>: Data<br><em>errors</em>: Errors data<br><em>field</em>: Instance</td>\n<td>(value?: unknown, errors?: unknown, field?: NextField) =&gt; void</td>\n<td>func.noop</td>\n<td></td>\n</tr>\n<tr>\n<td>validate</td>\n<td>Is the name array of the check/need to check</td>\n<td>boolean | Array&lt;string&gt;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>field</td>\n<td>Custom field (in Forms, you do not need to set)</td>\n<td>NextField</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Form Reset\">Form.Reset <a class=\"header-anchor scroll-count-item\" href=\"#Form Reset\" data-scroll-id=\"Form Reset\">#</a></h3>\n<p>&#x7EE7;&#x627F; Button API</p>\n<p>Inherit Button API</p>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>names</td>\n<td>Custom reset field</td>\n<td>Array&lt;string&gt;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>onClick</td>\n<td>Triggered after clicking submit</td>\n<td>() =&gt; void</td>\n<td>func.noop</td>\n<td></td>\n</tr>\n<tr>\n<td>toDefault</td>\n<td>Return default value</td>\n<td>boolean</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>field</td>\n<td>Custom field (in Forms, you do not need to set)</td>\n<td>NextField</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h3 id=\"Form Error\">Form.Error <a class=\"header-anchor scroll-count-item\" href=\"#Form Error\" data-scroll-id=\"Form Error\">#</a></h3>\n<p>&#x81EA;&#x5B9A;&#x4E49;&#x9519;&#x8BEF;&#x5C55;&#x793A;</p>\n<p>Custom error display</p>\n<table>\n<thead>\n<tr>\n<th>Param</th>\n<th>Description</th>\n<th>Type</th>\n<th>Default Value</th>\n<th>Required</th>\n</tr>\n</thead>\n<tbody>\n<tr>\n<td>name</td>\n<td>Form name</td>\n<td>string | Array&lt;string&gt;</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>field</td>\n<td>Custom field (in Forms, you do not need to set)</td>\n<td>NextField</td>\n<td>-</td>\n<td></td>\n</tr>\n<tr>\n<td>children</td>\n<td>Custom error rendering, can be a node or function(errors, state)</td>\n<td>ReactNode | ((errors: errorsGroup, state?: FieldState) =&gt; ReactNode)</td>\n<td>-</td>\n<td></td>\n</tr>\n</tbody>\n</table>\n<h2 id=\"About Validation\">About Validation <a class=\"header-anchor scroll-count-item\" href=\"#About Validation\" data-scroll-id=\"About Validation\">#</a></h2>\n<ul>\n<li>Suggest put FormItem as one component, convenient error prompt follow component display.</li>\n<li>The component must be the first child of the FormItem.</li>\n<li>See the more validation&apos;s rules for the <code>Field</code> component documentation.</li>\n</ul>\n<h2 id=\"Complex Form\">Complex Form <a class=\"header-anchor scroll-count-item\" href=\"#Complex Form\" data-scroll-id=\"Complex Form\">#</a></h2>\n<p>If your form scene is very complex, such as dynamic rendering, a large number of fields, complex data structures, complex linkage verification, you can consider using formily, formily has encapsulated all the fusion components, to ensure that you use it out of the box</p>\n"}