Skip to content

Magento 2 / Knockout js add image in form field notice

I want to add html tags to the notice of a specific field, I tried in LayoutProcessor but it does not interpret the image tags, I know it is possible from the field.html file, but it did not work for me, the knockout js condition do not work, this is my code:

app/code/Vendor/Module/Plugin/Checkout/Model/Checkout/LayoutProcessor.php

$shippingFieldsetChildren['document_type'] = [
            'component' => 'Magento_Ui/js/form/element/select',
            'additionalClasses' => 'document_type',
            'config' => [
                'customScope' => 'shippingAddress.custom_attributes',
                'customEntry' => null,
                'template' => 'ui/form/field',
                'elementTmpl' => 'ui/form/element/select'
            ],
            'dataScopePrefix' => 'shippingAddress',
            'dataScope' => 'shippingAddress.custom_attributes.document_type',
            'label' => __('Document Type'),
            'provider' => 'checkoutProvider',
            'sortOrder' => 40,
            'validation' => [
                'required-entry' => true
            ],
            'options' => $this->documentTypes->toOptionArray(),
            'filterBy' => null,
            'customEntry' => null,
            'visible' => true,
            'notice' => __('Validaremos tu documento para el descuento por ser suscriptor de El Tiempo.'),
        ];

app/design/frontend/Vendor/default/Magento_Ui/web/templates/form/field.html

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<div class="field" data-bind="visible: visible, attr: {'name': element.dataScope}, css: additionalClasses">

    <label class="label" data-bind="attr: { for: element.uid }">
        <!-- ko if: element.label -->
        <span translate="element.label"></span>
        <!-- /ko -->
    </label>

    <div class="control" data-bind="css: {'_with-tooltip': element.tooltip}">
        <!-- ko ifnot: element.hasAddons() -->
            <!-- ko template: element.elementTmpl --><!-- /ko -->
        <!-- /ko -->

        <!-- ko if: element.hasAddons() -->
            <div class="control-addon">
                <!-- ko template: element.elementTmpl --><!-- /ko -->

                <!-- ko if: element.addbefore -->
                    <label class="addon-prefix" data-bind="attr: { for: element.uid }"><span data-bind="text: element.addbefore"></span></label>
                <!-- /ko -->

                <!-- ko if: element.addafter -->
                    <label class="addon-suffix" data-bind="attr: { for: element.uid }"><span data-bind="text: element.addafter"></span></label>
                <!-- /ko -->
            </div>
        <!-- /ko -->

        <!-- ko if: element.tooltip -->
            <!-- ko template: element.tooltipTpl --><!-- /ko -->
        <!-- /ko -->

        <!-- ko if: element.notice -->
            <div class="field-note" data-bind="attr: { id: element.noticeId }">
                <!-- ko if: element.name === 'shippingAddress.custom_attributes.document_type' -->
                    <img src="" alt="">
                <!-- /ko -->
                <span data-bind="text: element.notice"/>
            </div>
        <!-- /ko -->

        <!-- ko if: element.error() -->
            <div class="field-error" data-bind="attr: { id: element.errorId }" generated="true">
                <span data-bind="text: element.error"/>
            </div>
        <!-- /ko -->

        <!-- ko if: element.warn() -->
            <div role="alert" class="message warning" data-bind="attr: { id: element.warningId }" generated="true">
                <span data-bind="text: element.warn"/>
            </div>
        <!-- /ko -->
    </div>
</div>
<!-- /ko -->

I tried with:

<!-- ko if: element.name === 'shippingAddress.custom_attributes.document_type' -->
                    <img src="" alt="">
                <!-- /ko -->

The img tag not display in document_type custom field.

enter image description here

The field attributes:

enter image description here

Thanks!