[SalesForce] I’m unable to enter values in the lightning input

Hi I'm totally new to lightning. I'm trying to create a form with input fields. But I'm unable to enter any values or set date or toggle the checkbox.

Here is the lightning component. I have added this component to a lightning tab.

<aura:component implements="force:appHostable,flexipage:availableForAllPageTypes,force:lightningQuickAction" access="global" >
<aura:attribute name="newExpenseObject" type="Expense__c" />
<lightning:card>
    <aura:set attribute="title">
        Create your Expense!
    </aura:set>
    <lightning:layout horizontalAlign="space">
        <lightning:layoutItem flexibility="auto" padding="around-small">
            <form>
                <lightning:input type="number" class="slds-text-color_default" name="Amount" label="Amount" value="{!v.Expense__c.Amount__c}"/>
                <lightning:input name="Client" label="Client" placeholder="Client name" value="{!v.Expense__c.Client__c}"/>
                <lightning:input type="date" name="Date" label="Date" value="{!v.Expense__c.Date__c}"/>
                <lightning:input type="toggle" name="Reimbursed" label="Reimbursed" checked="{!v.Expense__c.Reimbursed__c}"/>
            </form>
        </lightning:layoutItem>
        <lightning:layoutItem flexibility="auto" padding="around-small"></lightning:layoutItem>
    </lightning:layout>
</lightning:card>

Best Answer

Two problems here.

Access Variable Name

Unlike Visualforce, you're always using an attribute of some sort. Therefore, while you'd say {!Expense__c.Client__c} in Visualforce, in Lightning, you're expected to use your variable:

<lightning:input value="{!v.newExpenseObject.Client__c}" ... />

Where v is the global value provider for attributes, newExpenseObject is the attribute name, and Client__c is the specific field you want to read/write.

Default Value

Generally speaking, sObjects should be initialized. You do so by providing a default value:

<aura:attribute name="newExpenseObject" type="Expense__c" default="{ 'sobjectType': 'Expense__c' }" />
Related Topic