magento2组件之表单组件

2年前

阅读本文预计花费：6 分钟

作者：晓风拂月

7天成为Magento系统架构师，现在开始学习Magento全栈开发！

《Magento2.X企业级开发实战》

表单组件是字段的集合，可以在选项卡和字段集中进行分组。它支持CRUD操作。

以下组件可在表单组件的范围内使用：

ActionDelete
Checkbox
Checkboxset
DataSource
Email
FieldSet
File
FileUploader
Hidden
HtmlContent
Input
Multiline
Multiselect
Radioset
Select
Text
Textarea
Wysiwyg

magento2表单组件可配置的选项

OPTION	DESCRIPTION	TYPE	DEFAULT
`ajaxSave`	Save Form values by AJAX.	Boolean	`false`
`ajaxSaveType`	There are two possible approaches to collect form data for ajaxSave:`default` – collects data using native FormData JavaScript class`simple` – collects data to simple key value pairs object	`default`\|`simple`	`default`
`buttons`	A list of buttons that should be added to form.	Object	`{}`
`component`	The path to the component’s JS constructor in terms of RequireJS.	String	`Magento_Ui/js/form/form`
`exportsselectorPrefixmessagesClass`	Used to notify some external entity about property changing. `exports` value is an object, composed of the following:`key`: name of the internal property or method which is tracked for changes.`value`: name of the property or method which receives the notification. Can use string templates.For more details see the Linking properties of UI components topic.	ObjectStringString
`listensselectorPrefix`	Used for events listening.	String	`'destroyAdapter initAdapter'`
`errorClass`	The CSS class added to the component’s DOM block if an error appears.	String	`'.admin__field._error'`
`importsreloadUrl`	Used for tracking changes of an external entity property. `imports`’s value is an object, composed of the following:`key`: name of the internal property or method which receives the notifications.`value`: name of the property or method which is tracked for changes. Can use string templates.For more details see the Linking properties of UI components topic.	ObjectString	`'${ $.provider}:reloadUrl'`
`messagesClass`	The CSS class assigned to the `<div>` element, where the form elements validation error is rendered.	String	`'messages'`
`namespace`	Form identifier that is passed to backend when performing actions, e.g. validate or submit.	String
`selectorPrefix`	The name that can be used to address the block to which this attribute is assigned. The name must be unique per generated page. If not specified, the name is assigned automatically in the following format: `ANONYMOUS_n`	String	`'.page-content'`
`template`	The path to the component’s `.html` template.	String	`'ui/form/field'`

若要创建表单组件的实例，需要执行以下操作：

在自定义模块中，为实例添加配置文件，例如：customer_form.xml。

为entity或在DataProvider中实现元信息上传，添加一组字段（字段集组件和字段组件）。

为实现DataProviderInterface的实体创建DataProvider类

在Magento布局中添加组件作为节点：<uiComponent name=“customer_form”/>

<page xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:framework:View/Layout/etc/page_configuration.xsd">
    <body>
        <referenceContainer name="content">
            ...
            <uiComponent name="customer_form"/>
        </referenceContainer>
    </body>
</page>

配置组件

组件可以通过两种方式进行配置：

全局：使用任何模块的view/ui_component/etc/definition.xml文件。此文件中声明的所有设置将应用于所有组件的实例

本地：使用具体的组件实例配置，例如view/base/ui_component/customer_form

magento2表单组件配置

创建配置文件：view/base/ui_component/customer_form.xml

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <argument name="data" xsi:type="array">
        <item name="js_config" xsi:type="array">
            <item name="provider" xsi:type="string">customer_form.customer_form_data_source</item>
        </item>
        <item name="label" xsi:type="string" translate="true">Customer Information</item>
        <item name="reverseMetadataMerge" xsi:type="boolean">true</item>
    </argument>
    <settings>
        <buttons>
            <button name="save_and_continue" class="Magento\Customer\Block\Adminhtml\Edit\SaveAndContinueButton"/>
            <button name="save" class="Magento\Customer\Block\Adminhtml\Edit\SaveButton"/>
            <button name="reset" class="Magento\Customer\Block\Adminhtml\Edit\ResetButton"/>
            <button name="order" class="Magento\Customer\Block\Adminhtml\Edit\OrderButton"/>
            <button name="resetPassword" class="Magento\Customer\Block\Adminhtml\Edit\ResetPasswordButton"/>
            <button name="unlock" class="Magento\Customer\Block\Adminhtml\Edit\UnlockButton"/>
            <button name="invalidateToken" class="Magento\Customer\Block\Adminhtml\Edit\InvalidateTokenButton"/>
            <button name="delete" class="Magento\Customer\Block\Adminhtml\Edit\DeleteButton"/>
            <button name="back" class="Magento\Customer\Block\Adminhtml\Edit\BackButton"/>
        </buttons>
        <layout>
            <navContainerName>left</navContainerName>
            <type>tabs</type>
        </layout>
        <deps>
            <dep>customer_form.customer_form_data_source</dep>
        </deps>
        ...
    </settings>
</form>

节点是可选的，包含组件所需的参数：

设置->deps-设置对组件初始化的依赖关系

js_config->provider-指定组件数据的名称

设置->布局-配置类符合可视化组件。DEP和提供程序的名称由根组件的完整路径和分隔符“”指定

使用组件和字段集在表单中添加字段说明：

...
<fieldset name="customer">
    <settings>
        <label translate="true">Account Information</label>
    </settings>
    <field name="entity_id" formElement="input">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="source" xsi:type="string">customer</item>
            </item>
        </argument>
        <settings>
            <dataType>text</dataType>
            <visible>false</visible>
        </settings>
    </field>
    ...
</fieldset>

要对组件进行分组，可以使用组件容器，如下例所示：

<container name="container_group" component="Magento_Ui/js/form/components/group" sortOrder="20">
    <argument name="data" xsi:type="array">
        <item name="type" xsi:type="string">group</item>
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Group</item>
            <item name="required" xsi:type="boolean">true</item>
            <item name="dataScope" xsi:type="boolean">false</item>
            <item name="validateWholeGroup" xsi:type="boolean">true</item>
        </item>
    </argument>
    <field name="group_id">
    ...
    </field>
    <field name="disable_auto_group_change">
    ...
    </field>
</container>

配置数据源：

您必须配置组件的数据源，以便为表单组件提供数据和元信息。

数据源聚合类的对象实现接口\Magento\Framework\View\Element\UiComponent\DataProvider\DataProviderInterface

数据源对象的配置示例：

<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <argument name="data" xsi:type="array">
        ...
    </argument>
    <dataSource name="customer_form_data_source">
        <argument name="data" xsi:type="array">
            <item name="js_config" xsi:type="array">
                <item name="component" xsi:type="string">Magento_Ui/js/form/provider</item>
            </item>
        </argument>
        <settings>
            <validateUrl path="customer/index/validate"/>
            <submitUrl path="customer/index/save"/>
        </settings>
        <dataProvider class="Magento\Customer\Model\Customer\DataProvider" name="customer_form_data_source">
            <settings>
                <requestFieldName>id</requestFieldName>
                <primaryFieldName>entity_id</primaryFieldName>
            </settings>
        </dataProvider>
    </dataSource>
</form>

组件配置：

参数“dataProvider”-包含配置、类名和参数

“js_config”->“component”->负责组件的JavaScript指示

数据源提供的数据是共享的，可用于程序集中的所有组件（在本例中，用于UI表单的所有子组件）。

数据源是另一个UI组件，它以特定格式提供数据，并在所有UI组件之间共享。

如无特殊说明或标注，任何个人或组织，复制、转载、采集本站内容请注明：
本文来源于：【Magento中文网】，并添加本文地址链接。
如未按上述操作复制或转载，本站有权追究法律责任。
若本站内容侵犯了原著者的合法权益，可联系我们进行处理。

《Magento2.X企业级开发实战》

magento2表单组件可配置的选项

magento2表单组件配置

相关文章