How to update a field with Lightning Components?

Question

Following the "expense" example in the documentation, I'm trying implement an even simpler Lightning Component just to query and update just the single field Account.Name - query and display works fine, but if I enter a new name in the UI, it won't be saved to the database when I press the "save" button.

Component elfL1.cmp

<aura:component controller="elfL1" implements="forceCommunity:availableForAllPageTypes">
    <aura:handler name="init" value="{!this}" action="{!c.init}"/>
    <aura:attribute name="account"  type="Account" />
    <h1>Test</h1>
    <form>
        <ui:inputText aura:id="client"
            label="{!$ObjectType.Account.fields.Name.Label}"
            class="form-control"
            value="{!v.account.Name}"
            placeholder="test"
        />
        <br />
        <ui:button class="form-control" aura:id="button" label="Save" press="{!c.save}"/>
        <br />
    <br />
    </form>
</aura:component>

Clientside controller elfL1Controller.js

({
    init : function(component, event, helper) {
        console.log('init');
        var action2 = component.get("c.getAccount");        
        action2.setCallback(this, function(response) {
            console.log(response.getReturnValue());
            component.set("v.account", response.getReturnValue());
        });
        $A.enqueueAction(action2);
    }, 
    save : function(component, event, helper) {
        console.log('save:1');
        var action = component.get("c.account");
        action.setParams({ "account": account  });
        action.setCallback(this, function() {  console.log('SAVED.');  } );
        $A.enqueueAction(action);
        console.log('save:end');
    },
})

APEX controller elfL1.cls

public class elfL1 {
    @AuraEnabled public static Account          getAccount(){
        return (Account) Database.query( ' SELECT Name FROM Account LIMIT 1 ' )[0];
    }
    @AuraEnabled public static Account          saveAccount(Account account){
        upsert account;
        return account;
    }   
}

I can seen no errors, but I run that in a Community created by the community builder and it seems to suppress errors. Now following this suggestion here, I put elfL1 in an additional Standalone Lightning App. There is still no error in the browser-console (thanks to a powerful try-catch, I guess), but a nice popup-window with the message:

Uncaught error in $A.run() : Unable to find 'account' on 'compound://c.elfL1'.

I thought 'account' is addressing that attribute <aura:attribute name="account" type="Account" /> which I have populated in init()

What am I doing wrong?

Sidenote

Any idea on how to debug this in a better way is highly appreciated. The need to create an additional Standalone Lightning App just to get any error feels very uncomfortable and strange... having errors not in the console isn't optimal, since you can't see clearly in which order it happens. Why the console is suppressed? Can this be disabled?

Answer 1

I think the error lies in these lines

var action = component.get("c.account");
action.setParams({ "account": account  });

try changing it to

var action = component.get("c.saveAccount");
var account = component.get("v.account");
action.setParams({"account": account});

as I'm sure you know, the action needs to reference an AuraEnabled controller method, rather than the account itself