Wie sende ich 1 Lightning-Record-Edit-Formular und führe den onsubmit-Methodenparameter aus?

Question

Wenn ich den folgenden Code zum Senden jedes Formulars verwende, wird onsubmit = {handleSubmit} nicht ausgeführt. Warum?

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

Answer 1

Wenn Sie eine benutzerdefinierte einreichen Event - Handler definieren onsubmit={handleSubmit}innerhalb ein lightning-record-edit-form, dann Sie müssen eine Schaltfläche Element definieren (von type='submit') innerhalb des Datensatzes bearbeiten Form . LWC würde diese Senden-Schaltfläche dann mit dem benutzerdefinierten Ereignishandlercode verbinden. Wenn Sie auf die Schaltfläche klicken, wird ein Übermittlungsereignis ausgelöst und der benutzerdefinierte Ereignishandlercode ausgeführt. In diesem Ereignishandlercode enthält event.detail.fieldsparam alle Feldwerte, die zur Laufzeit aktualisiert werden können.

Im Gegenteil, wenn Sie mehrere lightning-record-edit-forms, eine einzelne Schaltfläche zum Senden / Speichern mit onclickEreignishandler und den folgenden Code im Ereignishandler haben, hat der als definiert definierte benutzerdefinierte Ereignishandler onsubmit={handleSubmit}keine Auswirkungen, da mit diesem Handler keine bestimmte Schaltfläche verbunden ist Code.

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

Durch Ausführen des obigen Codes wird die benutzerdefinierte Ereignishandlermethode nicht aufgerufen, da Sie nicht das Übermittlungsereignis von auslösen lightning-record-edit-form, sondern direkt die öffentliche Methode submitdes Datensatzbearbeitungsformulars aufrufen .

Ich sehe kein Feldattribut in Ihrem Code auf dem lightning-record-edit-form, vorausgesetzt, Sie verwenden lightning-input-fieldsin Ihrer Komponente. Eine mögliche Lösung für Ihr Problem besteht darin, direkt in Ihrem Code auf die Eingabefelder zuzugreifen. Wenn Sie beispielsweise das Blitz-Eingabefeld als definiert haben <lightning-input-field field-name="Name"></lightning-input-field>, können Sie auf dieses bestimmte Feld zugreifen, wie im folgenden Beispielcode gezeigt.

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

Wenn Sie dasselbe Feld in anderen Bearbeitungsformularen für Blitzdatensätze haben, können Sie Daten- * Attribute verwenden. Wenn Sie beispielsweise das Blitz-Eingabefeld als definiert haben <lightning-input-field data-id="Name1" field-name="Name"></lightning-input-field>, können Sie auf dieses bestimmte Feld zugreifen, wie im folgenden Beispielcode gezeigt.

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

Alternativ können Sie auch den onchangeEreignishandler von verwenden lightning-input-fieldund die Werte in den Eingabefeldern verwalten.

Sie können die Datenattribute auch auf der Ebene des Datensatzbearbeitungsformulars verwenden, wenn Sie die Übermittlung der Datensatzdaten identifizieren und steuern möchten. Haftungsausschluss: Ich habe nicht versucht, Ihr Problem zu replizieren und diese Lösung an meinem Ende zu testen, aber es sollte funktionieren.