UI 구성 요소를 사용하여 양식 필드 아래에 메모 추가

UI 구성 요소를 사용하여 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')
    ]
);

위의 코드는 이것을 생성합니다 (필드 아래의 텍스트에 주목하십시오).

form ui-components를 사용하여 같은 것을 어떻게 달성 할 수 있습니까?
다음과 같이 정의 된 양식이 있습니다.

<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

(A)의 경로와 모듈에 그 복사 view/base/web/template/form/field-html-notice.html(또는 비슷한 메모하시기 바랍니다 templates디렉토리가 변경되는 template것을 의도적이고 사용자 지정 서식 파일에 필요한 )

이제 새 field-html-notice.html 파일에서 html 파일을 수정하여 $data.noticeusing html 을로드 하고 범위를 완전히 건너 뛸 수 있습니다. (물론 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>

시간을내어 마 젠토 팀이 additionalInfohtml로 렌더링 할 수있는 기능을 편리하게 제공한다는 것을 깨달았습니다 .

2. 통지 클래스가있는 div를 컴포넌트에 대한 추가 정보로 추가

더 많은 옵션은 additionalInfo섹션 에서 알림 div를 렌더링하는 것 입니다. 라인을 따라 뭔가

    <!-- 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 유효성 검사기가 파괴되므로주의하시기 바랍니다 <또는 >귀하의 추가 정보의 문자를, 따라서 <및>

참고 : <![CDATA[<p>cool paragraph man</p>]] 감사합니다 @Marius 에서 HTML을 래핑 할 수 있습니다.

현재 Magento 2 버전 2.2.8 및 2.3.1은 모두 UI 양식 필드에서 기본적으로 html additionalInfo를 지원합니다.

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

field.html 템플릿을 수정할 필요가 없습니다.