一旦我在选择上进行选择，每个必填字段都会出现“必填字段”错误

Question

我目前正在为 adminhtml 表单制作一个自定义 UI 组件，它扩展了默认的 UI-select 元素。但问题是，当我在这个新的 UI 上进行选择时，选择所有字段的值都会被清除，如果需要，则会出现错误。

我已经调试了一段时间，得出的结论是，当代码到达 this.value(data) 并引发异常时，此问题会出现。

未捕获的类型错误：无法读取未定义的属性“点击”

在这种情况下被点击的元素与普通 UI-select 中的元素相同。

这是组件的 XML，通过它添加到表单中。 是的，options 不应该在那里，但我不知道应该把它放在哪里才能让它工作。

<field name="programs" class="Mirasvit\Affiliate\Component\Filters\Type\MultiplePrograms">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="label" xsi:type="string" translate="true">Programs</item>
                    <item name="componentType" xsi:type="string">field</item>
                    <item name="formElement" xsi:type="string">select</item>
                    <item name="elementTmpl" xsi:type="string">Mirasvit_Affiliate/form/elements/multiple-programs</item>
                    <item name="component" xsi:type="string">Mirasvit_Affiliate/js/component/multiple-programs</item>
                    <item name="filterOptions" xsi:type="boolean">true</item>
                    <item name="multiple" xsi:type="boolean">false</item>
                    <item name="options" xsi:type="object">Mirasvit\Affiliate\Ui\Account\Source\Program</item>

                    <item name="tableOptions" xsi:type="object">Mirasvit\Affiliate\Ui\Program\Source\ProgramsWithTiers</item>
                    <item name="tableValues" xsi:type="object">Mirasvit\Affiliate\Ui\Program\Source\AccountPrograms</item>
                    <item name="tableFields" xsi:type="array">
                        <item name="name" xsi:type="array">
                            <item name="label" xsi:type="string">Name</item>
                            <item name="type" xsi:type="string">text</item>
                        </item>
                        <item name="tier" xsi:type="array">
                            <item name="label" xsi:type="string">Tier</item>
                            <item name="type" xsi:type="string">select</item>
                        </item>
                        <item name="fixed" xsi:type="array">
                            <item name="label" xsi:type="string">Fixed tier</item>
                            <item name="type" xsi:type="string">checkbox</item>
                        </item>
                    </item>
                </item>
            </argument>
        </field>

这是组件的js文件

define([
    'underscore',
    'jquery',
    'Magento_Ui/js/form/element/ui-select',
    'uiRegistry',
], function (_, $, Abstract, registry) {
    'use strict';

    return Abstract.extend({

        defaults: {
            optionsCache: [],
            options: [],
            listVisible: false,
            tableOptions: [],
            tableValues: [],
            tableFields: {},
            currentSelected: [],
        },

        toggleOptionSelected: function (data) {
            if (this.lastSelectable && data.hasOwnProperty(this.separator)) {
                return this;
            }

            this.options(this.options.without(data));

            /**
             * THIS IS WHERE THE COMPONENT BREAKS
             */
            this.value(data);

            this.listVisible(false);

            return this;
        },

        cleanHoveredElement: function () {
            if (this.hoveredElement) {
                $(this.hoveredElement)
                    .children(this.actionTargetSelector)
                    .removeClass(this.hoverClass);

                this.hoveredElement = null;
            }

            return this;
        },
    });
});

这是组件的php文件

class MultiplePrograms extends Select
{

    public function prepare() {
        $config = $this->getData('config');

        /** @var ArrayHelper $helper */
        $helper = ObjectManager::getInstance()->get(ArrayHelper::class);

        if (isset($config['tableOptions']) && $config['tableOptions'] instanceof ArrayInterface) {
            $config['tableOptions'] = $config['tableOptions']->toOptionArray();
        } else {
            throw new \Exception('Missing tableOptions tag for multiple-options field');
        }

        if (isset($config['tableFields'])) {
            $config['tableFields'] = $helper->nameToColumn($config['tableFields']);
        } else {
            throw new \Exception('Missing tableValues tag for multiple-options field');
        }

        if (isset($config['tableValues']) && $config['tableValues'] instanceof ArrayInterface) {
            $config['tableValues'] = $config['tableValues']->toOptionArray();
        }

        if (isset($config['options']) && $config['options'] instanceof ArrayInterface) {
            $config['options'] = $config['options']->toOptionArray();
        }

        $this->setData('config', (array)$config);

        parent::prepare();
    }
}

我希望能够将信息存储在这个组件的值中，以便以后可以传递给控制器​​

Answer 1

我发现了为什么会这样。 它抛出该错误的原因是因为this.value() 包含所有表单数据，因此通过将this.value({anything}) 设置为任何内容，将清除所有存储的字段并触发错误和观察者。