lightning:input field hidden

Question

I created a lightning component with lightning:recordEditForm and lightning:inputField to create a new record.

I have another field which I don't want it to be in the form but I want to populate it.

I didn't find a way to do this without put it in the form and use "slds-hidden" but that makes a gap in the UI.

Does someone know what to do in that case ? I mean, is there a better way to hide the field ? Or maybe a solution to "remove" the gap ?

Thanks.

Answer 1

Use slds-hide instead of slds-hidden.

So the thing is if you just want to disappear the element from the UI then use the slds-hidden and it will take its space.

And to remove the space as well use the slds-hide.

Answer 2

To customize your form's behavior during loading or data submission, utilize the onload and onsubmit attributes to define event handlers. If you capture the submit event and submit the form programmatically, use event.preventDefault() to prevent the default event behavior, avoiding duplicate form submissions.

Although slds-hide can hide elements, I do not recommend using it because the element can still be inspected and its value seen. Additionally, it slows down the UI load since the element remains present in the HTML.

<lightning:recordEditForm
        objectApiName="Account"
        onsubmit ="{!c.handleSubmit}">
    <lightning:messages />
    <lightning:inputField aura:id="nameField" fieldName="Name"/>
    <lightning:button class="slds-m-top_small" type="submit" label="Create new" />
handleSubmit(event){
   event.preventDefault();       // stop the form from submitting
   const fields = event.detail.fields;
   fields.Street = '32 Prince Street';
   this.template.querySelector('lightning-record-edit-form').submit(fields);
}