Erreur de validation après l'ajout d'une grille au formulaire de modification du client administrateur

8

J'ai ajouté avec succès un onglet personnalisé avec une grille au formulaire de modification client dans l'administration Magento. L'onglet utilise la <insertListing>balise XML dans sa présentation pour rendre la grille, qui fonctionne comme il se doit. Cependant, lorsque j'essaie d'enregistrer le client, la validation du formulaire génère une erreur. J'ai débogué cela et il semble que lorsque la validate()méthode de tab_group.jstente d'appeler la validateméthode de l'onglet, elle revient undefined. J'ai comparé cela à l'onglet Store Credit, qui a été créé à l'aide des blocs de grille obsolètes, et pour cet élément, il renvoie un tableau vide. Y a-t-il quelque chose que j'ai manqué dans ma configuration?

Erreur:

tab_group.js:68 Uncaught TypeError: Cannot read property 'valid' of undefined
    at tab_group.js:68
    at Function.findIndex (underscore.js:644)
    at Function._.find._.detect (underscore.js:206)
    at UiClass.validate (tab_group.js:67)
    at Array.some (<anonymous>)
    at UiClass.onValidate (tab_group.js:86)
    at setNested (objects.js:43)
    at Object.nested (objects.js:117)
    at UiClass.set (element.js:305)
    at updateValue (links.js:80)
(anonymous) @ tab_group.js:68
(anonymous) @ underscore.js:644
_.find._.detect @ underscore.js:206
validate @ tab_group.js:67
onValidate @ tab_group.js:86
setNested @ objects.js:43
nested @ objects.js:117
set @ element.js:305
updateValue @ links.js:80
(anonymous) @ events.js:87
trigger @ events.js:84
trigger @ events.js:162
validate @ form.js:333
save @ form.js:261
dispatch @ jquery.js:5226
elemData.handle @ jquery.js:4878

Disposition des onglets XML ( view/base/ui_component/customer_form.xml):

<?xml version="1.0"?>
<form xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xsi:noNamespaceSchemaLocation="urn:magento:module:Magento_Ui:etc/ui_configuration.xsd">
    <fieldset name="downloaded_blueprints" sortOrder="1000">
        <settings>
            <label translate="true">Downloaded Blueprints</label>
        </settings>
        <insertListing name="downloaded_blueprints_listing">
            <argument name="data" xsi:type="array">
                <item name="config" xsi:type="array">
                    <item name="source" xsi:type="string">blueprint_download</item>
                </item>
            </argument>
            <settings>
                <externalProvider>${ $.ns }.downloaded_blueprints_listing_data_source</externalProvider>
                <autoRender>true</autoRender>
                <dataScope>downloaded_blueprints_listing</dataScope>
                <ns>downloaded_blueprints_listing</ns>
                <exports>
                    <link name="customerId">${ $.externalProvider }:params.customer_id</link>
                </exports>
                <imports>
                    <link name="customerId">${ $.provider }:data.customer.entity_id</link>
                </imports>
            </settings>
        </insertListing>
    </fieldset>
</form>
Joseph Leedy
la source
Veuillez partager votre code de grille, le code partagé actuel fonctionne bien.
kunj

Réponses:

8

Ceci est le bug. Vous pouvez donc y ajouter du mixin. Essayez la méthode suivante:

VendorName / ModuleName / view / adminhtml / requirejs-config.js


var config = {
    "config": {
        'mixins': {
            'Magento_Ui/js/form/components/tab_group': {
                'VendorName_ModuleName/js/mixin/form/components/tab_group': true
            }
        }
    }
};

VendorName / ModuleName / view / adminhtml / web / js / mixin / form / components / tab_group.js


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

    return function (TabGroup) {
        return TabGroup.extend({
            /**
             * Delegates 'validate' method on element, then reads 'invalid' property
             * of params storage, and if defined, activates element, sets
             * 'allValid' property of instance to false and sets invalid's
             * 'focused' property to true.
             *
             * @param {Object} elem
             */
            validate: function (elem) {
                // Pass through if element is not fieldset
                if (elem.index !== 'downloaded_blueprints') {
                    return this._super();
                }

                var result = elem.delegate('validate'),
                    invalid;

                invalid = _.find(result, function (item) {
                    if (item === undefined) {
                        return 0;
                    }

                    return !item.valid;
                });

                if (invalid) {
                    elem.activate();
                    invalid.target.focused(true);
                }

                return invalid;
            }
        });
    }
});

Supprimer pub / static / * et déployer du contenu statique

Sohel Rana
la source
Merci. Cela a très bien fonctionné, avec quelques modifications.
Joseph Leedy
@JosephLeedy, quelles modifications avez-vous apportées. après avoir ajouté ce JS, toujours la même erreur
Jaisa
@Jaisa si vous regardez les révisions des réponses, vous verrez ce que j'ai changé.
Joseph Leedy
Bonjour @JosephLeedy, j'obtiens la même erreur en entreprise, j'ai appliqué ce changement mais il affiche toujours la même erreur même après avoir supprimé la génération de var pub / statique et nettoyé le cache. Pourriez vous m'aider s'il vous plait? J'utilise M2.3.1
Pribhav
Excellent travail .. merci beaucoup pour cela.
Mohit Kumar Arora