11

I know there is already a topic about this, as well as a documentation, but I just can't get it to work:

How can I extend Ui Components' JavaScript in Magento 2?

I'm trying to extend Magento_Ui/js/form/form (located in vendor/magento/module-ui/view/base/web/js/form/form.js).

So I added requirejs-config.js In my modules' view/base-folder:

var config = {
    map: {
        '*': {
            "Magento_Ui/js/form/form": "Vendor_Module/js/form/form"
        }
    }
};

And in my file base/web/js/form/form.js:

define([
  "Magento_Ui/js/form/form"
], function(FormComponent){
  "use strict";

  /**
   * Rewrite original UI Component:
   */
  return FormComponent.extend({});
});

But for some reason, FormComponent is not the UI Component I'm trying to extends, but undefined.

According to the documentation, this should work, but it doesn't. So what am I missing here?

2
  • Please, describe your task, because I think that you don't need to override core form component. Looks like your component require itself because there is map in require config
    – Max
    Jan 11, 2017 at 20:31
  • @MaxStsepantsevich Well, it's related to my other question: magento.stackexchange.com/questions/154201/… I have dynamically added upload fields and I want to have those submitted as well when I save my form. Jan 12, 2017 at 8:39

3 Answers 3

24

This can be accomplished using a requirejs "mixin".

First create Your_Module/view/base/requirejs-config.js with this code:

var config = {
    'config': {
        'mixins': {
            'Magento_Ui/js/form/form': {
                'Your_Module/form-hook': true
            }
        }
    }
};

Now make the file Your_Module/view/base/web/form-hook.js :

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

    return function (Form) {
        return Form.extend({
            initialize: function () {
                this._super();
                console.log('Hello from the mixin!');
            }
        });
    }
});

This example extends the initialize method of the form component.

You can read more about "mixins" here: http://alanstorm.com/the-curious-case-of-magento-2-mixins/

0
1

I had a similar problem and I solved it.

Try to find declaration of ui component in code and replace it. For example:

Magento_Checkout: LayoutProcessor.php

private function processPaymentConfiguration(array &$configuration, array $elements)

...
$output[$paymentCode . '-form'] = [
    'component' => 'Vendor_Module/js/view/billing-address',

P.S. Don't use this:

var config = {
    map: {
        '*': {
            "Magento_Ui/js/form/form": "Vendor_Module/js/form/form"
        }
    }
};
0

The issue seems to be caused by the map in your requirejs-config.js. I follow this method below, mentioned in the DevDocs.

1 - Create your custom Ui Component file

It can be inside one of these folders below, depending on if you're creating a module or theme customization.

Theme: <theme_dir>/web/js or <theme_dir>/<VendorName>_<ModuleName>/web/js

Module: <module_dir>/view/frontend/web/js

2 - Extend the default Ui Component

In your Ui Component, you will have to extend and call the default component, as the code below.

define([
  'Magento_Ui/js/default/component/path/here'
], function(DefaultComponentExample){

  return DefaultComponentExample.extend({

    defaults: { ... }, // properties with default values
    ... // methods of your component
  });
});
1
  • Your component code doesn't work because when you replace "Magento_Ui/js/form/form" with "Vendor_Module/js/form/form" in your map, "Magento_Ui/js/form/form" will reference "Vendor_Module/js/form/form" in your JS component. It's a circular reference. Mar 2, 2022 at 17:28

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.