A lightning:recordEditForm component is a wrapper component that accepts a record ID and is used to display one or more fields and labels associated with that record using lightning:inputField. lightning:recordEditForm requires a record ID to display the fields on the record. It doesn't require additional Apex controllers or Lightning Data Service to display record data. This component also takes care of field-level security and sharing for you, so users see only the data they have access to.
lightning:recordEditForm and lightning:inputField support the following features.
If a lightning:button component with type="submit" is provided for the record edit layout and it's clicked, the component automatically performs error handling and saves any changes in the input fields. Similarly, if the button is provided for the record create layout and it's clicked, error handling is automatically performed and a new record is created with the input data you provide. You must include lightning:messages to support error handling and displaying of error messages. Additionally, this component provides basic input validation. For example, entering an invalid email format for the Email field results in an error message when you try to submit the change. Similarly, a required field like the Last Name field displays an error message when you try to submit the change and the field is blank.
Editing a RecordTo enable record editing, pass in the ID of the record and the corresponding object API name to be edited. Specify the fields you want to include in the record edit layout using lightning:inputField.
<aura:component> <lightning:recordEditForm recordId="003XXXXXXXXXXXXXXX" objectApiName="Contact"> <lightning:messages /> <lightning:inputField fieldName="FirstName" /> <lightning:inputField fieldName="LastName" /> <lightning:inputField fieldName="Email" /> <lightning:button variant="brand" type="submit" name="update" label="Update" /> </lightning:recordEditForm> </aura:component>
To enable record creation, pass in the object API name for the record to be created. Specify the fields you want to include in the record create layout.
<aura:component> <lightning:recordEditForm aura:id="recordEditForm" objectApiName="Contact"> <lightning:messages /> <lightning:inputField fieldName="Name" /> <lightning:button type="submit" label="Create new" /> </lightning:recordEditForm> </aura:component>
If your org uses record types, picklist fields display values according to your record types. You must provide a record type ID using the recordTypeId attribute if you have multiple record types on an object and you don't have a default record type.
To locate the ID of a record type, use the following SOQL query.
Select Id, Name From RecordType Where SobjectType = 'Contact'
To create a multi-column layout for your record edit layout, use the Grid utility classes in Lightning Design System. This example creates a two-column layout.
<aura:component> <lightning:recordEditForm recordId="003XXXXXXXXXXXXXXX" objectApiName="Contact"> <div> <div> <!-- Your lightning:inputField components here --> </div> <div> <!-- More lightning:inputField components here --> </div> </div> </lightning:recordEditForm> </aura:component>
The lookup type is supported in Lightning Experience only. When used in the mobile app, the lookup type is rendered as an input text field. The geolocation compound field is not supported. Read-only fields are displayed as input fields that are disabled. When usinglightning:inputField, rich text fields can't be used for image uploads.
For supported objects, see the User Interface API Developer Guide.
EventsThe onerror action returns the following parameter.
Parameter | Type | Description |
---|---|---|
error | Object | The error data returned by the form submission.
|
The onload action returns the following parameter.
Parameter | Type | Description |
---|---|---|
recordUi | Object | The object metadata. For more information, see the User Interface API Developer Guide. |
The onsubmit action returns the following parameter.
Parameter | Type | Description |
---|---|---|
fields | Object | The fields that are provided for submission during a record create. For example, if you include a lightning:inputField component with the Name field, fields returns FirstName, LastName, and Salutation. |
The onsuccess action returns the following parameter.
Parameter | Type | Description |
---|---|---|
response | Object[] | The response data associated with the record during a record
create or edit.
|
Attribute Name | Attribute Type | Description | Required? |
---|---|---|---|
body | Component[] | The body of the component. In markup, this is everything in the body of the tag. | |
class | String | A CSS class for the outer element, in addition to the component's base classes. | |
objectApiName | String | The API name of the object. | Yes |
onerror | Action | The action triggered when there is an error on form submission. | |
onload | Action | The action triggered when the form data is loaded. | |
onsubmit | Action | The action triggered when the form is submitted. | |
onsuccess | Action | The action triggered when the form is saved. | |
recordId | String | The ID of the record to be displayed. | |
recordTypeId | String | The ID of the record type, which is required if you created multiple record types but don't have a default. |