Jak przesłać 1 formularz edycji rekordu-błyskawicy i uruchomić parametr metody onsubmit?

Nov 26 2020

kiedy używam poniższego kodu do przesyłania każdego formularza, onsubmit = {handleSubmit} nie działa. Czemu?

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

Odpowiedzi

1 arut Nov 30 2020 at 12:15

Jeśli zdefiniujesz niestandardową procedurę obsługi zdarzenia przesyłania za pomocą onsubmit={handleSubmit}elementu wewnątrz a lightning-record-edit-form, musisz zdefiniować element przycisku (lub type='submit') w formularzu edycji rekordu . LWC połączy następnie ten przycisk przesyłania z kodem obsługi zdarzeń niestandardowych. Tak więc po kliknięciu przycisku wyzwalane jest zdarzenie przesyłania i wykonywany jest kod obsługi zdarzeń niestandardowych. W tym kodzie obsługi zdarzeń event.detail.fieldsparametr param przechowuje wszystkie wartości pól, które mogą być aktualizowane w czasie wykonywania.

Wręcz przeciwnie, gdy masz wiele lightning-record-edit-forms, pojedynczy przycisk przesyłania / zapisywania z onclickobsługą zdarzeń i następujący kod w procedurze obsługi zdarzeń, niestandardowy program obsługi zdarzeń zdefiniowany jako nie onsubmit={handleSubmit}będzie miał wpływu, ponieważ nie ma określonego przycisku połączonego z tym programem obsługi kod.

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

Wykonanie powyższego kodu nie wywołuje niestandardowej metody obsługi zdarzeń, ponieważ nie wyzwalasz zdarzenia przesyłania lightning-record-edit-form, ale bezpośrednio wywołujesz metodę publiczną submitformularza edycji rekordu.

Nie widzę atrybutu fields w twoim kodzie w lightning-record-edit-form, więc zakładając, że używasz lightning-input-fieldsw swoim komponencie. Możliwym rozwiązaniem problemu jest dostęp do pól wejściowych bezpośrednio w kodzie. Na przykład, jeśli masz pole wejściowe błyskawicy zdefiniowane jako <lightning-input-field field-name="Name"></lightning-input-field>, możesz uzyskać dostęp do tego konkretnego pola, jak pokazano w przykładowym kodzie poniżej.

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

Jeśli masz to samo pole w innych formularzach edycji rekordów wyładowań atmosferycznych, możesz użyć atrybutów data- *. Na przykład, jeśli masz pole wejściowe błyskawicy zdefiniowane jako <lightning-input-field data-id="Name1" field-name="Name"></lightning-input-field>, możesz uzyskać dostęp do tego konkretnego pola, jak pokazano w przykładowym kodzie poniżej.

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

Alternatywnie możesz również użyć programu onchangeobsługi zdarzeń lightning-input-fieldi zarządzać wartościami w polach wejściowych.

Możesz również użyć atrybutów danych na poziomie formularza edycji rekordu, jeśli chcesz zidentyfikować i kontrolować przekazywanie danych rekordu. Zastrzeżenie: nie próbowałem odtworzyć Twojego problemu i przetestować tego rozwiązania na moim końcu, ale powinno działać.