Lightning: Fields on Record loaded via force:recordData appear to be read-only / unwriteable

Question

Scenario: I am loading an existing record using force:recordData, but since this component isn't on a record page, it cannot/does not implement force:hasRecordId. Instead, I created an attribute called {!v.contactId} and I set that as the recordId parameter on the force:recordData component. Before init, the contactId attribute is null, but I set it to a valid Contact Id during init, and then afterwards I run the .reloadRecord() method on the recordData component which reloads the record.

Issue: The record is loaded from the database, the simpleContactRecord attribute returns all of the expected fields, I can set a lightning:input field value to show the Phone number from the contact using {!v.simpleContactRecord.Phone}, but when I try to modify the value in the input field, it doesn't let me. The data shows correctly on the screen and I can place my cursor into the input field, but if I try to type anything or delete any existing data it doesn't do anything. Likewise, if I try to programmatically set the variables during a save call using component.set("v.simpleContactRecord.Phone, "5555555555"); and then saving the record, it doesn't update the value.

Based on some other posts and documentation I found online, it seems like I am approaching the loading of the record correctly - since there is no record Id available to the page, I need to set it manually (which I do), and then force a reload of the record (which I do). I don't understand why I can't edit or update any of the data in this record, especially since I'm explicitly setting the Mode="EDIT" parameter on the recordData component. What am I doing wrong?

The full code from my test component is below:

Component:

<aura:component implements="forceCommunity:availableForAllPageTypes" access="global" Controller="CreateTicketController">
    <aura:attribute name="contactId" type="String" />
    <aura:attribute name="userId" type="String" />
    <!-- START: Contact Object Records -->
    <aura:attribute name="contactRecord" type="Object" />
    <aura:attribute name="simpleContactRecord" type="Object" />
    <aura:attribute name="contactRecordError" type="String" />
    <!-- END: Contact Object Records -->

    <aura:handler name="init" value="{!this}" action="{!c.init}" />

    <force:recordData aura:id="contactRecordEditor" 
                      Mode="EDIT"
                      layoutType="FULL" 
                      targetRecord="{!v.contactRecord}"
                      targetFields="{!v.simpleContactRecord}"
                      targetError="{!v.contactRecordError}"
                      recordId="{!v.contactId}" 
                      recordUpdated="{!c.handleRecordUpdated}" />

    <form>
        <lightning:input type="tel" aura:id="phone" label="Phone" name="Phone" value="{!v.simpleContactRecord.Phone}" />
    </form>
    <div class="slds-form-element">
        <span><br /><lightning:button onclick="{!c.save}" label="Submit" class="slds-button slds-button_brand slds-text-heading_small" /></span>
    </div>
</aura:component>

Client-Side Controller:

({
    init: function (component, event, helper) {
        console.log('Init actionz');
        var action = component.get("c.getRelatedAccounts");
        var userId = $A.get('$SObjectType.CurrentUser.Id');
        var contactId;
        var relationships;
        console.log('Test Init Actions');
        component.set("v.userId",userId);

        action.setParams({
            "userId": userId
        });
        action.setCallback(this, function(response) {
            var state = response.getState();
            console.log('Response State: ' + state);
            console.log('is Valid: ' + component.isValid());
            if(component.isValid() && state == "SUCCESS"){
                relationships = JSON.parse(response.getReturnValue());
                console.log('Relationship Length: ' + relationships.length);
                console.log('Relationship 0 Account Id: ' + relationships[0].Contact.AccountId);
                contactId = relationships[0].ContactId;
                console.log('Contact Id: ' + contactId);
                component.set("v.contactId", contactId);
                component.find("contactRecordEditor").reloadRecord(
                    true,
                    $A.getCallback(function() {
                        var rec = component.get("v.contactRecord");
                        var error = component.get("v.contactRecordError");
                        if(error || (rec === null)) {
                            console.log("Error initializing record template: " + error);
                            return;
                        }
                        console.log("Record template initialized: " + rec.apiName);
                        console.log('Simple Contact Record: ' + JSON.stringify(component.get("v.simpleContactRecord")));
                    })
                );
            }
        });
        // Invoke the service
        $A.enqueueAction(action);
    }
})

Answer 1

I don't understand why I can't edit or update any of the data in this record, especially since I'm explicitly setting the Mode="EDIT" parameter

Your whole issue is exactly on that line where you are setting the mode. Hint - case sensitivity.

<force:recordData aura:id="contactRecordEditor" 
    Mode="EDIT" // this is the culprit here!
    ...
    ...
/>

And the root cause is the UPPERCASE M in mode.

Change it to mode=EDIT, and you will see it working.

<force:recordData aura:id="contactRecordEditor" 
    mode="EDIT"
    ...
    ...
/>