Lightning-Record-Edit-Form: Halt Form Submission

Question

In JavaScript (jQuery for example), we can return false to halt the form submission from happening under specific condition(s). I tried doing this in my Lightning Web Component in the method tied the onsubmit, but the submit executes anyway. How do we halt submission in LWC?

Markup

<lightning-record-edit-form onsubmit={OnSubmitImpl} ...

JS

OnSubmitImpl() {

   // Halt condition check
   if (...) {

      // Stop the form from submitting
      return false;

   }

}

Answer 1

Certainly with lightning-record-form (and I presume for the edit variant) you can provide an onsubmit handler:

<lightning-record-form
    object-api-name="MyObjectType__c"
    layout-type="Full"
    mode="edit"
    onsubmit={handleFormSubmit}
    onsuccess={handleFormSuccess}
    onerror={handleFormError}
    oncancel={handleFormCancel}>
</lightning-record-form>

This function must actually stop the event propagation, apply whatever it needs to do and then (potentially conditionally) request the continuation of the submission process by invoking the submit function on the lightning-record-form instance itself. To stop the submission, just don't call submit. This example doesn't show conditionally calling submit, but does show how you get the fields to inspect/update and pass on through:

handleFormSubmit(event) {
    event.stopPropagation();

    // This must also suppress default submit processing
    event.preventDefault();

    // Set default values of the new instance.
    let fields = event.detail.fields;
    fields.SomeFieldToChange__c = this.someValue;
    fields.SomeOtherField__c = this.someOtherValue;

    // Push the updated fields though for the actual submission itself
    this.template.querySelector('lightning-record-form').submit(fields);
}