我目前正在为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();
}
}
我希望能够将信息存储在此组件的值中,以便以后可以将其传递给控制器
1条答案
按热度按时间mqxuamgl1#
我发现了发生这种情况的原因。它引发错误的原因是因为
this.value()
包含了所有的表单数据,因此通过将this.value({anything})
设置为任何值,将清除存储的所有字段并触发错误和观察器。