Update Field not in form using Lighting Record Edit form

Question

We have a Lightning-Record-Edit-Form using layout-type = full to create and update Account. However, due to business needs, we decided to expose limited fields to the users via the layout in our LWC form using lightning-input-field.

Now the business logic needs us to populate values for fields that are not in the UI using the user inputs in the LWC. Since we don't have these fields exposed to UI in the first place we are not able to use this.template.querySelectorAll('lightning-input-field') to manipulate the values for these fields.

Is there any way to still leverage the Lightning-Record-Edit-Form submit capability to update fields that are not part of LWC lightning-input-field html?

Answer 1

You can add those calculated fields in the onsubmit event of the record-edit-form. HTML

<lightning-record-edit-form 
     record-id={recordId}
     object-api-name={objectApiName}
     onsubmit={handleSubmit}
     ...
>
     ...
</lightning-record-edit-form>

JS

handleSubmit(event){
   event.preventDefault();       // stop the form from submitting
   const fields = event.detail.fields;
   fields.Name = 'name';
   fields.Field1__c = 'feedback';
   fields.Field2__c = 1234;
   this.template.querySelector('lightning-record-edit-form').submit(fields);
}

See the document for more details