Magento 2 UI组件表单提交时无法获取htmlContent字段值

这个问题我之前帮不少开发者解决过——Magento 2的htmlContent元素本质是用来渲染静态或动态HTML内容的，它不属于表单可提交控件，所以默认情况下，里面的数据不会被自动包含在表单提交参数里。下面给你两个最常用的解决方案，结合你的代码场景来调整：

方案一：用隐藏字段配合JS同步数据 #

如果你的htmlContent里是简单的用户输入元素（比如文本框、单选框），最快捷的方式是添加一个隐藏表单字段，然后通过JS把htmlContent内的用户操作同步到这个隐藏字段中，这样提交表单时就能正常获取数据。

修改你的request_form.xml #

在request_item字段集里添加一个隐藏字段，同时保留你的htmlContent配置：

<fieldset name="request_item">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Products</item>
            <item name="collapsible" xsi:type="boolean">true</item>
            <item name="sortOrder" xsi:type="number">30</item>
        </item>
    </argument>

    <!-- 新增：隐藏字段，用于存储htmlContent中的数据 -->
    <field name="custom_product_data" formElement="input">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="visible" xsi:type="boolean">false</item>
                <item name="dataType" xsi:type="string">text</item>
                <item name="formElement" xsi:type="string">input</item>
            </item>
        </argument>
    </field>

    <!-- 你的原有htmlContent配置 -->
    <htmlContent name="request_products_html">
        <argument name="block" xsi:type="object">Vendor\YourModule\Block\Adminhtml\Request\ProductsHtml</argument>
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="template" xsi:type="string">Vendor_YourModule::request/products.phtml</item>
            </item>
        </argument>
    </htmlContent>
</fieldset>

在htmlContent的模板文件中添加同步JS #

假设你的products.phtml里有自定义的输入元素，添加JS监听用户操作并同步到隐藏字段：

<!-- 你的自定义HTML内容，比如一个产品选择输入框 -->
<div class="product-selection">
    <input type="text" id="selected_product" placeholder="输入产品SKU...">
</div>

<script>
require(['jquery'], function($) {
    // 监听输入框变化，实时同步到隐藏字段
    $('#selected_product').on('keyup change blur', function() {
        $('input[name="custom_product_data"]').val($(this).val());
    });

    // 页面加载时初始化（如果有默认值）
    $(document).ready(function() {
        $('input[name="custom_product_data"]').val($('#selected_product').val());
    });
});
</script>

提交表单后，你就可以在控制器中通过$this->getRequest()->getParam('custom_product_data')获取到这个值了。

方案二：自定义UI组件（适合复杂场景） #

如果你的htmlContent包含复杂的交互（比如多元素联动、自定义组件），推荐创建一个自定义UI组件，继承Magento的表单元素抽象类，这样可以自动处理数据绑定和提交逻辑。

步骤1：创建自定义组件JS文件 #

在app/code/Vendor/YourModule/view/adminhtml/web/js/form/element/custom-products.js中编写：

define([
    'Magento_Ui/js/form/element/abstract'
], function (Abstract) {
    'use strict';

    return Abstract.extend({
        defaults: {
            template: 'Vendor_YourModule/form/element/custom-products'
        },

        // 重写获取值的方法，返回自定义HTML中的数据
        getValue: function () {
            // 这里根据你的HTML结构收集数据，比如多个输入框拼接成JSON
            var productData = {
                sku: $('#product_sku').val(),
                qty: $('#product_qty').val()
            };
            return JSON.stringify(productData);
        },

        // 初始化时将已有值填充到HTML元素
        setValue: function (value) {
            this._super();
            if (value) {
                var data = JSON.parse(value);
                $('#product_sku').val(data.sku);
                $('#product_qty').val(data.qty);
            }
            return this;
        }
    });
});

步骤2：创建组件模板文件 #

在app/code/Vendor/YourModule/view/adminhtml/web/template/form/element/custom-products.html中编写：

<div class="custom-product-component">
    <input type="text" id="product_sku" placeholder="产品SKU">
    <input type="number" id="product_qty" placeholder="数量" min="1">
</div>

步骤3：在表单中使用自定义组件 #

修改request_form.xml，替换原有的htmlContent为自定义字段：

<fieldset name="request_item">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="label" xsi:type="string" translate="true">Products</item>
            <item name="collapsible" xsi:type="boolean">true</item>
            <item name="sortOrder" xsi:type="number">30</item>
        </item>
    </argument>

    <!-- 使用自定义UI组件 -->
    <field name="custom_product_data" formElement="customProducts">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <item name="label" xsi:type="string" translate="true">Custom Product Data</item>
                <item name="component" xsi:type="string">Vendor_YourModule/js/form/element/custom-products</item>
            </item>
        </argument>
    </field>
</fieldset>

这种方式下，表单会自动将组件的值提交，你可以在后端直接获取到JSON格式的custom_product_data参数，无需额外的JS同步逻辑。

内容的提问来源于stack exchange，提问作者Trliok