Tambahkan catatan di bawah bidang formulir menggunakan komponen ui

Bagaimana saya bisa menambahkan teks kecil di bawah bidang di Magento 2 menggunakan komponen ui.
Menggunakan Magento\Framework\Data\Formsaya bisa melakukan ini:

/** @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')
    ]
);

Kode di atas akan menghasilkan ini (perhatikan teks di bawah bidang).

Bagaimana saya bisa mencapai hal yang sama menggunakan form ui-components?
Saya memiliki bentuk yang didefinisikan seperti ini:

<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>

Saya mencoba menambahkan <item name="note" xsi:type="string" translate="true">Some note here</item>tetapi, coba tebak?

Anda dapat mencapai ini menggunakan tag berikut.

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

Saya memiliki waktu yang sangat menjengkelkan mencari tahu bagaimana mendapatkan html untuk di-render dalam objek pemberitahuan. Ada dua solusi yang saya temukan. Saya tahu ini mungkin komentar, tapi saya pikir orang lain juga akan tertarik dengan fungsi ini.

1. Buat elemen html baru yang menjadikan pemberitahuan sebagai HTML alih-alih teks

elemen asli dapat ditemukan di /vendor/magento/module-ui/view/base/web/templates/form/field.html

Salin itu ke modul Anda dengan jalur view/base/web/template/form/field-html-notice.htmlatau sesuatu yang serupa ( harap perhatikan templatesdirektori diubah menjadi templateyang disengaja dan diperlukan untuk file templat khusus )

Sekarang di file field-html-notice.html baru Anda, Anda dapat memodifikasi file html untuk memuat $data.noticehtml menggunakan dan melewatkan rentang sama sekali. (tentu saja jika Anda ingin menerjemahkan html Anda, Anda harus menyesuaikan solusi ini untuk mendapatkan solusi)

Solusinya adalah dengan mengambil templat ini dan memodifikasi

    <!-- /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>

untuk terlihat lebih seperti ini:

    <!-- 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>

Setelah saya meluangkan waktu untuk melakukan itu, saya menyadari tim Magento dengan mudah memberi kami kemampuan untuk menambahkan additionalInfoyang diterjemahkan sebagai html.

2. Tambahkan div dengan kelas pemberitahuan sebagai info tambahan untuk komponen

Opsi yang lebih rumit adalah membuat pemberitahuan div render di additionalInfobagian tersebut. Sesuatu di sepanjang garis

    <!-- 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>

Jadi ya, sederhana kan? Baik. Aku akan tidur sekarang.

(harap dicatat bahwa validator xml akan rusak jika Anda menggunakan karakter aktual <atau >karakter di info tambahan Anda, karenanya <dan>

Catatan: ternyata Anda bisa membungkus html Anda di <![CDATA[<p>cool paragraph man</p>]] Thanks @Marius

Magento 2 versi 2.2.8 dan 2.3.1 saat ini mendukung html AdditionalInfo secara default di bidang Formulir UI.

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

Tidak perlu memodifikasi template field.html.