Ошибка «Поле обязательно для заполнения» отображается в каждом обязательном поле после выбора - PullRequest
Новая
       20

Ошибка «Поле обязательно для заполнения» отображается в каждом обязательном поле после выбора

0 голосов
/ 21 мая 2019

В настоящее время я создаю пользовательский UI-компонент для формы adminhtml, который расширяет элемент UI-select по умолчанию.Но проблема в том, что, когда я делаю выбор в этом новом пользовательском интерфейсе, все поля очищаются, и, если они необходимы, появляется ошибка.

Я некоторое время отлаживал и пришел к выводучто эта проблема появляется в конце строки, когда код попадает в this.value (данные), а также вызывает исключение.

Uncaught TypeError: Невозможно прочитать свойство 'click' из неопределенного

Элемент, по которому щелкают в этом случае, является тем же элементом, что и обычный 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();
    }
}

Я хочу иметь возможность хранить информацию в значении этого компонента, чтобы она могла быть передана в контроллер позже

1 Ответ

0 голосов
/ 22 мая 2019

Я узнал, почему это происходит. Причина, по которой он выдавал эту ошибку, заключается в том, что this.value() содержал все данные формы и, таким образом, устанавливая this.value({anything}) на что-либо, очистил бы все сохраненные поля и вызвал ошибки и наблюдателей.

...