I have a Lightning controller method that evaluates form input fields and sends their values to an AuraEnabled Apex controller method for CRUD.

Works fine the first time around. When I then change the select box value, the Javsascript object representation of the record is updated fine (verified in the js console), but the Apex controller receives data identical to the original submission, ignoring the changes, and the first record is duplicated.

Perhaps a bug in Lightning, or have I set my code up incorrectly?

Snippet from component:

  <div  class="row">
   <div class="col-md-12">
    <h1>Create New Mapping</h1>
    Salesforce Field: <ui:inputSelect class="form-control" aura:id="SFFields" />
    Adapter Field: <ui:inputSelect class="form-control" aura:id="AdapterFields" />
    <ui:button label="Save" press="{!c.createNewMapping}" class="btn" />

Lightning controller:

createNewMapping : function(cmp, e, helper) {

    var mapping = cmp.get("v.newMapping"); //The JS representation of my custom sObject
    var flow = cmp.get("v.flow");
    var internalField = cmp.find("SFFields");
    var externalField = cmp.find("AdapterFields");

    mapping.Flow__c = flow.Id;
    mapping.ExternalFieldName__c = externalField.get("v.value");
    mapping.ExternalFieldLabel__c = externalField.get("v.text");
    mapping.InternalFieldName__c = internalField.get("v.value");
    mapping.InternalFieldLabel__c = internalField.get("v.text");
    mapping.Name = mapping.ExternalFieldName__c;

    helper.newMapping(cmp, mapping);


Lightning Helper:

newMapping : function(cmp, mapping) {

    // At this point the JS Object reflects any changes I made 
    // to the form inputs in the UI. Everything looks good.

    var action = cmp.get("c.saveMapping");
        "mapping" : mapping

    action.setCallback(this, function(response) {
      var state = response.getState();
      if (cmp.isValid() && state === "SUCCESS") {

Apex Controller Method:

public static Mapping__c saveMapping(Mapping__c mapping){
    // Debugging shows the values are the same as from the first submission
    System.debug('Mapping: ' + mapping);
    upsert mapping;
    return mapping;

You are missing the change handler in your component. You essentially need to add a handler in your component such as

<aura:handler name="change" value="{!v.items}" action="{!c.itemsChange}"/>

and in your controller, do any processing/ setting of values such as

    itemsChange: function(cmp, evt) {
        var v = evt.getParam("value");
        if (v === cmp.get("v.items")) {
        //do something

This will be a client-side controller action when a value in one of the component's attributes changes - so when any values changes (e.g. the 2nd time that you form is submitted), the valueChange.evt event is automatically fired.

| improve this answer | |

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.