Magento 2 - override knockoutjs template located in base folder

Question

I need to change the value of the maxinput field in the knockoutjs template vendor\magento\module-ui\view\base\web\templates\form\element\input.html so I have to replace the template with my own template loaded from my module app\code\Company\Base\view\base\web\templates\form\element\input.html.

So I created a requirejs-config.js file in my module and tried to override the original knockoutjs file:

app\code\Company\Base\view\base\requirejs-config.js:

var config = {
    map: {
        '*': {
            'Magento_Ui/templates/form/element/input':'Company_Base/templates/form/element/input'
        }
    }
};

...then I cleared the cache, but it is still loading the original template instead of mine.

Answer 1

I solved it by using a mixin to (mix-in my code)/(extend the code of) Magento_Ui/js/form/element/abstract.js to replace the value of elementTmpl to make it load my own template.

app\code\Company\Base\view\adminhtml\web\template\form\element\input.html:

<!--
/**
 * Copyright © Magento, Inc. All rights reserved.
 * See COPYING.txt for license details.
 */
-->
<input class="admin__control-text" type="text"
    data-bind="
        event: {change: userChanges},
        value: value,
        hasFocus: focused,
        valueUpdate: valueUpdate,
        attr: {
            name: inputName,
            placeholder: placeholder,
            'aria-describedby': noticeId,
            id: uid,
            disabled: disabled,
            maxlength: 512
    }"/>

app\code\Company\Base\view\base\requirejs-config.js:

Note: You can also place requirejs-config.js to app\code\Company\Base\view\adminhtml\, this works as well.

var config = { 
    config: {
        mixins: {
            'Magento_Ui/js/form/element/abstract': {
                'Company_Base/js/form/element/abstract-ext': true
            }
        }
    }
};

app\code\Company\Base\view\adminhtml\web\js\form\element\abstract-ext.js:

define(['ko'], function(ko) {
    'use strict';

    return function (Abstract) {
        return Abstract.extend({
            defaults: {
                elementTmpl: "Company_Base/form/element/input"
            },

            initialize: function() {
                this._super();

                return this;
            }
        });
    };
});