Error de validación después de agregar cuadrícula al formulario de edición del cliente administrador


8

Agregué con éxito una pestaña personalizada con una cuadrícula al formulario Editar cliente en el administrador de Magento. La pestaña utiliza la <insertListing>etiqueta en su diseño XML para representar la cuadrícula, que funciona como debería. Sin embargo, cuando intento salvar al cliente, la validación del formulario arroja un error. He depurado esto y parece que cuando el validate()método tab_group.jsintenta llamar al método de la pestaña, validatevuelve undefined. Comparé esto con la pestaña Crédito de la tienda, que se creó utilizando los bloques de cuadrícula en desuso, y para ese elemento devuelve una matriz vacía. ¿Hay algo que me perdí en mi configuración?

Error:

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

Diseño de pestaña 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>

Comparta su código de cuadrícula, el código compartido actual funciona bien.
kunj

Respuestas:


8

Este es el error. Entonces puedes agregar mixin en él. Pruebe de la siguiente manera:

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

Eliminar pub / static / * e implementar contenido estático


Gracias. Esto funcionó muy bien, con algunas modificaciones.
Joseph Leedy

@JosephLeedy, qué modificaciones se hacen. después de agregar este JS, todavía recibí el mismo error
Jaisa

@Jaisa, si echas un vistazo a las revisiones de respuestas, verás lo que he cambiado.
Joseph Leedy

Hola @JosephLeedy, obtengo el mismo error en la empresa, apliqué este cambio pero aún muestra el mismo error incluso después de eliminar la generación de var pub / estática y limpiar el caché. ¿Sería tan amable de ayudarme? Estoy usando M2.3.1
Pribhav

Buen trabajo ... muchas gracias por esto.
Mohit Kumar Arora
Al usar nuestro sitio, usted reconoce que ha leído y comprende nuestra Política de Cookies y Política de Privacidad.
Licensed under cc by-sa 3.0 with attribution required.