Изменение метки набора полей в форме компонентов пользовательского интерфейса
У меня есть форма, построенная с помощью компонентов пользовательского интерфейса.
И при изменении поля я пытаюсь изменить метку набора полей, который содержит это поле.
Вот что у меня есть (значительная часть)
Определение набора полей:
<fieldset name="steps">
<settings>
<label translate="true">Step config</label>
<collapsible>true</collapsible>
</settings>
<field name="title" formElement="input" component="[Namespace_Module]/js/fieldset-title">
<argument name="data" xsi:type="array">
<item name="config" xsi:type="array">
<item name="fit" xsi:type="boolean">false</item>
</item>
</argument>
<settings>
<validation>
<rule name="required-entry" xsi:type="boolean">true</rule>
</validation>
<dataType>text</dataType>
<label>Title</label>
<dataScope>title</dataScope>
</settings>
</field>
</fieldset>
И fieldset-title
js-файл, который обрабатывает мое поле заголовка, выглядит так:
define([
'Magento_Ui/js/form/element/abstract',
'uiRegistry'
], function (Abstract, uiRegistry) {
'use strict';
return Abstract.extend({
onUpdate: function (value) {
var fieldset = uiRegistry.get({'name': this.parentName});
fieldset.label(value);
}
});
});
Вот что я хочу сказать... "когда значение моих входных данных изменится, установите то же значение, что и метка набора полей".
Дополнительные информация:
Внутри js набор полей извлекается правильно. Я получаю экземпляр набора полей, который мне нужен.
Переменная value
- это то, чего я ожидаю.
Кроме
fieldset.label(value);
Я пытался fieldset.label = value;
fieldset.setLabel(value);
, fieldset.getLabel(value);
2 answers
Я сделал это очень уродливым способом (да... jquery). Если у кого-то есть более чистый метод, пожалуйста, поделитесь.
Мой пользовательский компонент теперь выглядит так.
define([
'Magento_Ui/js/form/element/abstract',
'jquery'
], function (Text, $) {
'use strict';
return Text.extend({
onUpdate: function (value) {
$('#' + this.uid).closest('.fieldset-wrapper').find('.fieldset-wrapper-title span:first').html(value);
return this._super();
}
});
});
Не очень горжусь if, но он работает с автономным набором полей.
Но если этот набор полей является частью записи компонента динамических записей, заголовок сбрасывается после добавления или удаления новой записи.
Я немного обновил код, сделав его более чистым и качественным. Это может быть полезно другим:)
define([
'Magento_Ui/js/form/element/abstract',
'jquery'
], function (Text, $) {
'use strict';
return Text.extend({
onUpdate: function (value) {
$("label[for=" + this.uid + "]").text(value);
return this._super();
}
});
});