Represents an input field that corresponds to a field on a Salesforce object. This component respects the attributes of the associated field. For example, if the component is a number field with 2 decimal places, then the default input value contains the same number of decimal places. It loads the input field according to the field type. If the component corresponds to a date field, a date picker is displayed in the field. Dependent picklists and rich text fields are not supported. Required fields are not enforced client-side.
This example creates an input field that displays data for a contact name. Bind the field using the value attribute and provide a default value to initialize the object.
<aura:component controller="ContactController"> <aura:attribute name="contact" type="Contact" default="{ 'sobjectType': 'Contact' }"/> <aura:handler name="init" value="{!this}" action="{!c.doInit}" /> <force:inputField value="{!v.contact.Name}"/> </aura:component>
In this example, the v.contact.Name expression bounds the value to the Name field on the contact. To load record data, wire up the container component to an Apex controller that returns the contact.
public with sharing class ContactController { @AuraEnabled public static Contact getContact() { return [select Id, Name from Contact Limit 1]; } }
Pass the contact data to the component via a client-side controller.
({ doInit : function(component, event, helper) { var action = component.get("c.getContact"); action.setCallback(this, function(response) { var state = response.getState(); if (state === "SUCCESS") { component.set("v.contact", response.getReturnValue()); console.log(response.getReturnValue()); } }); $A.enqueueAction(action); } })
This component doesn't use the Lightning Design System styling. Use lightning:input if you want an input field that inherits the Lightning Design System styling.
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 | The CSS style used to display the field. | |
errorComponent | Component[] | For internal use only. Displays error messages for the field. | |
required | Boolean | Specifies whether this field is required or not. | |
value | Object | Data value of Salesforce field to which to bind. |
Event Name | Event Type | Description |
---|---|---|
change | COMPONENT | The event fired when the user changes the content of the input. |