Jak przesłać 1 formularz edycji rekordu-błyskawicy i uruchomić parametr metody onsubmit?
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
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.fields
parametr param przechowuje wszystkie wartości pól, które mogą być aktualizowane w czasie wykonywania.
Wręcz przeciwnie, gdy masz wiele lightning-record-edit-form
s, pojedynczy przycisk przesyłania / zapisywania z onclick
obsł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ą submit
formularza edycji rekordu.
Nie widzę atrybutu fields w twoim kodzie w lightning-record-edit-form
, więc zakładając, że używasz lightning-input-fields
w 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 onchange
obsługi zdarzeń lightning-input-field
i 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ć.