7

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 extends a 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?

  • 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 '17 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. – Giel Berkers Jan 12 '17 at 8:39
11

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

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"
        }
    }
};

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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