Додайте примітку до поля форми за допомогою компонентів інтерфейсу

Як я можу додати невеликий текст під поле в Magento 2, використовуючи компоненти інтерфейсу.
Використовуючи, Magento\Framework\Data\Formя могла це зробити:

/** @var \Magento\Framework\Data\Form $form */
$form = $this->formFactory->create();
$fieldset = $form->addFieldset(
    'base_fieldset',
    [
        'legend' => __('Some legend here'),
        'class'  => 'fieldset-wide'
    ]
);
$fieldset->addField(
    'name',
    'text',
    [
        'name'      => 'name',
        'label'     => __('Name'),
        'title'     => __('Name'),
        'note'      => __('Some note here')
    ]
);

Код, наведений вище, створить це (зверніть увагу на текст під полем).

Як я можу досягти того самого, використовуючи форми ui-компоненти?
У мене така форма визначена:

<field name="name">
    <argument name="data" xsi:type="array">
        <item name="config" xsi:type="array">
            <item name="dataType" xsi:type="string">text</item>
            <item name="label" xsi:type="string" translate="true">Name</item>
            <item name="formElement" xsi:type="string">input</item>
            <item name="source" xsi:type="string">[entity]</item>
            <item name="sortOrder" xsi:type="number">10</item>
            <item name="dataScope" xsi:type="string">name</item>
            <item name="validation" xsi:type="array">
                <item name="required-entry" xsi:type="boolean">true</item>
            </item>
        </item>
    </argument>
</field>

Я спробував додати, <item name="note" xsi:type="string" translate="true">Some note here</item>але, вгадайте, що?

Ви можете досягти цього за допомогою наступного тегу.

<item name="notice" xsi:type="string" translate="true">Some note here</item>

Мені було дуже прикро розраховувати, як отримати HTML для відображення в об’єкті повідомлення. Я розібрався у двох рішеннях. Я знаю, що це може бути коментарем, але я вважав, що інші люди також будуть зацікавлені в цій функціональності.

1. Створіть новий елемент html, який відображатиме повідомлення як HTML замість тексту

оригінальний елемент можна знайти за адресою /vendor/magento/module-ui/view/base/web/templates/form/field.html

Скопіюйте це у свій модуль із контуром view/base/web/template/form/field-html-notice.htmlчи чимось подібним ( будь ласка, зверніть увагу на те, що templatesкаталог змінено на templateнавмисний і потрібний для спеціальних файлів шаблонів )

Тепер у новому файлі field-html-notice.html ви можете змінити файл html для завантаження $data.notice та пропустити проміжок часу. (звичайно, якщо ви хочете перекласти свій HTML, вам потрібно налаштувати це рішення, щоб мати певний спосіб вирішення)

Рішенням було б взяти цей шаблон і змінити

    <!-- /vendor/magento/module-ui/view/base/web/templates/form/field.html:35 -->
    <div class="admin__field-note" if="$data.notice" attr="id: noticeId">
        <span translate="notice"/>
    </div>

    <div class="admin__additional-info" if="$data.additionalInfo" html="$data.additionalInfo"></div>

виглядати щось більше так:

    <!-- view/base/web/template/form/field-html-notice.html:35 -->
    <div class="admin__field-note" if="$data.notice" attr="id: noticeId" html="$data.notice"></div>

    <div class="admin__additional-info" if="$data.additionalInfo" html="$data.additionalInfo"></div>

Після того, як я знайшов час для цього, я зрозумів, що команда Magento зручно дала нам можливість додати, additionalInfoщо відображається як html.

2. Додайте розділ із класом сповіщень як додаткову інформацію для компонента

Набагато чіткішим варіантом було б, щоб у additionalInfoрозділі було відображено розділ сповіщень . Щось по лінії

    <!-- my_cool_component.xml -->
    <field name="field_id">
        <argument name="data" xsi:type="array">
            <item name="config" xsi:type="array">
                <!-- other field config -->
                <item name="additionalInfo" xsi:type="string" translate="true">
                    &lt;div class="admin__field-note"&gt;
                        This looks like a notice&lt;br/&gt;
                        it is super &ltspan style="font-weight=bold"&gt;TACKY&lt/span&gt;&lt;br/&gt;
                        but it will work &lta href="http://google.com"&gt;I promise&lt/a&gt;
                    &lt;/div&gt;
                </item>
            </item>
        </argument>
    </field>

Так так, просто так? Добре. Я зараз іду спати.

(зауважте, що валідатор xml зламається, якщо ви використовуєте фактичну <або >символи у своїй додатковій інформації, звідси і< і>

Примітка: виявляється, ви можете просто загорнути свій html у <![CDATA[<p>cool paragraph man</p>]] спасибі @Marius

Поточні версії 2.2 Magento 2 2.2.8 та 2.3.1 підтримують html AdditionalInfo за замовчуванням у полі Форма інтерфейсу користувача.

<item name="additionalInfo" xsi:type="string"><![CDATA[<b>My Html Information</b>]]>
</item>

Не потрібно змінювати шаблон field.html.