¿Cómo enviar 1 formulario de edición de registro relámpago y ejecutar el parámetro de método onsubmit?

Nov 26 2020

cuando utilizo el siguiente código para enviar cada formulario, onsubmit = {handleSubmit} no se ejecuta. ¿Por qué?

<lightning-record-edit-form key={item.id} object-api-name="professionalExperience__c" onsubmit={handleSubmit}>

this.template
        .querySelectorAll("lightning-record-edit-form")
        .forEach(element => {
            alert('ELEMENTO: ' + JSON.stringify(element));
            element.submit();
            alert('post submit SUBMIT');
            
        });

  handleSubmit(event){
        alert('hello');
        event.preventDefault();       // stop the form from submitting
        const fields = event.detail.fields;
        alert(JSON.stringify(fields));
        console.log(fields);
        this.template.querySelector('lightning-record-edit-form').submit(fields);
     }

Respuestas

1 arut Nov 30 2020 at 12:15

Si define un controlador de eventos de envío personalizado usando onsubmit={handleSubmit}dentro de a lightning-record-edit-form, entonces necesita definir un elemento de botón (de type='submit') dentro del formulario de edición de registro . LWC luego conectaría este botón de envío al código del controlador de eventos personalizado. Entonces, al hacer clic en el botón, se activa un evento de envío y se ejecuta el código del controlador de eventos personalizado. Dentro de este código de controlador de eventos, event.detail.fieldsparam contiene todos los valores de campo que se pueden actualizar durante el tiempo de ejecución.

Por el contrario, cuando tiene varios correos lightning-record-edit-formelectrónicos, un solo botón enviar / guardar con el onclickcontrolador de eventos y el siguiente código en el controlador de eventos, el controlador de eventos personalizado definido como onsubmit={handleSubmit}no tendrá ningún impacto porque no hay un botón específico conectado con este controlador. código.

this.template.querySelectorAll("lightning-record-edit-form").forEach(element => {element.submit();});

La ejecución del código anterior no invoca el método del controlador de eventos personalizado porque no está activando el evento de envío del lightning-record-edit-form, sino llamando directamente al método público submitdel formulario de edición de registros.

No veo un atributo de campos en su código en el lightning-record-edit-form, así que suponiendo que está usando lightning-input-fieldsen su componente. La posible solución a su problema es acceder a los campos de entrada directamente en su código. Por ejemplo, si tenía el campo de entrada relámpago definido como <lightning-input-field field-name="Name"></lightning-input-field>, puede acceder a este campo específico como se muestra en el código de muestra a continuación.

const inputFields = this.template.querySelectorAll('lightning-input-field');
    
if (inputFields) {
   inputFields.forEach(field => {
        if(field.name === "Name") {
            // Do something here with the field
        }
    });
}

Si tiene el mismo campo en otros formularios de edición de registros relámpago, puede usar atributos de datos *. Por ejemplo, si tenía el campo de entrada relámpago definido como <lightning-input-field data-id="Name1" field-name="Name"></lightning-input-field>, puede acceder a este campo específico como se muestra en el código de muestra a continuación.

const inputFields = this.template.querySelectorAll('lightning-input-field');
    
if (inputFields) {
   inputFields.forEach(field => {
        if(field.dataset.id === "Name1") {
            // Do something here with the field
        }
    });
}

Alternativamente, también puede usar el onchangecontrolador de eventos de lightning-input-fieldy administrar los valores en los campos de entrada.

También puede utilizar los atributos de datos a nivel de formulario de edición de registros, si desea identificar y controlar el envío de los datos del registro. Descargo de responsabilidad: no he intentado replicar su problema y probar esta solución al final, pero debería funcionar.