Como enviar um formulário de edição de registro relâmpago e executar o parâmetro do método onsubmit?
quando eu uso o código abaixo para enviar cada formulário, onsubmit = {handleSubmit} não é executado. 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);
}
Respostas
Se você definir um manipulador de eventos de envio personalizado usando onsubmit={handleSubmit}
em a lightning-record-edit-form
, será necessário definir um elemento de botão (de type='submit'
) no formulário de edição de registro . O LWC então conectaria esse botão de envio ao código do manipulador de eventos personalizado. Assim, ao clicar no botão, um evento de envio é disparado e o código do manipulador de eventos personalizado é executado. Dentro deste código de manipulador de eventos, event.detail.fields
param contém todos os valores de campo que podem ser atualizados durante o tempo de execução.
Ao contrário, quando você tem vários lightning-record-edit-form
s, um único botão enviar / salvar com onclick
manipulador de eventos e o código a seguir no manipulador de eventos, o manipulador de eventos personalizado definido como onsubmit={handleSubmit}
não terá impacto porque não há um botão específico conectado a este manipulador código.
this.template.querySelectorAll("lightning-record-edit-form").forEach(element => {element.submit();});
Executar o código acima não invoca o método do manipulador de eventos customizado porque você não está disparando o evento de envio de lightning-record-edit-form
, mas chamando diretamente o método público submit
do formulário de edição de registro.
Não vejo um atributo de campos em seu código no lightning-record-edit-form
, assumindo que você está usando lightning-input-fields
em seu componente. A solução possível para o seu problema é acessar os campos de entrada diretamente no seu código. Por exemplo, se você definiu o campo de entrada de relâmpago como <lightning-input-field field-name="Name"></lightning-input-field>
, pode acessar esse campo específico conforme mostrado no código de amostra abaixo.
const inputFields = this.template.querySelectorAll('lightning-input-field');
if (inputFields) {
inputFields.forEach(field => {
if(field.name === "Name") {
// Do something here with the field
}
});
}
Se você tiver o mesmo campo em outros formulários de edição de registro de relâmpago, poderá usar atributos data- *. Por exemplo, se você definiu o campo de entrada de relâmpago como <lightning-input-field data-id="Name1" field-name="Name"></lightning-input-field>
, pode acessar esse campo específico conforme mostrado no código de amostra abaixo.
const inputFields = this.template.querySelectorAll('lightning-input-field');
if (inputFields) {
inputFields.forEach(field => {
if(field.dataset.id === "Name1") {
// Do something here with the field
}
});
}
Como alternativa, você também pode usar o onchange
manipulador de eventos lightning-input-field
e gerenciar os valores nos campos de entrada.
Você também pode usar os atributos de dados no nível do formulário de edição de registro, se quiser identificar e controlar o envio dos dados do registro. Isenção de responsabilidade: não tentei replicar seu problema e testar esta solução no meu fim, mas deve funcionar.