mjhjmtu

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() )
 );
 
 );
 // Invoke the service
 $A.enqueueAction(action);
 
)

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"
 ...
 ...
/>