Como enviar um formulário de edição de registro relâmpago e executar o parâmetro do método onsubmit?

Nov 26 2020

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

1 arut Nov 30 2020 at 12:15

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.fieldsparam 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-forms, um único botão enviar / salvar com onclickmanipulador 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 submitdo 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-fieldsem 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 onchangemanipulador de eventos lightning-input-fielde 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.