Submit Only 1 of Multiple Lightning-Record-Edit-Form Elements

Question

This should be a pretty simple answer, but I can't seem to find anything out there. I have two lightning-record-edit-form elements inside of the same template element. Using the QuerySelector or by another means, I want to select only one of them and submit it. The one I want to submit also happens to be the second on the template.

Answer 1

You can do something similar to below:-

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

Here, I am accessing both the form elements using querySelectorAll and running for each loop on both of them. Then checking the id to identify the second form element and then submit the form using submit method.