Question

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

我已经调试了一段时间，并得出了这样的结论：当代码到达this.value（data）并引发异常时，这个问题就会出现。

未捕获的TypeError：无法读取未定义的属性“ click”

在这种情况下，单击的元素与普通的UI选择中的元素相同。

这是组件的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})设置为任何值，将清除所有存储的字段并触发错误和观察者。

我对选择进行选择后，每个必填字段都会显示“必填字段”错误

1 个答案: