knockout.js 当我在select上进行选择时,每个必填字段上都会显示“Field is required”(字段为必填字段)错误

5jvtdoz2  于 2022-11-10  发布在  其他
关注(0)|答案(1)|浏览(257)

我目前正在为adminhtml表单制作一个自定义的UI组件,它扩展了默认的UI选择元素。但问题是,当我在这个新的UI选择元素上进行选择时,所有字段的值都被清除,如果它们是必需的,则会出现错误。
我已经调试了一段时间,得出的结论是,当代码到达这个.value(data)时,这个问题就会出现,并且还会引发异常。
未捕获的类型错误:无法读取未定义的属性'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();
    }
}

我希望能够将信息存储在此组件的值中,以便以后可以将其传递给控制器

mqxuamgl

mqxuamgl1#

我发现了发生这种情况的原因。它引发错误的原因是因为this.value()包含了所有的表单数据,因此通过将this.value({anything})设置为任何值,将清除存储的所有字段并触发错误和观察器。

相关问题