Trailhead challenge passed but unable to use the edit component

Question

From the Manipulate Records with force:recordData module https://trailhead.salesforce.com/modules/lightning_data_service/units/lightning_data_service_manipulate_records, I passed the challenge using the below component for editing the name of an account record. However when applying it to records page of Account and trying to edit the Name of the account I get an error.

Component

<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId">
<aura:attribute name="accountRecord" type="Object"/>    
<aura:attribute name="simpleNewAccount" type="Object"/>
<aura:attribute name="newAccountError" type="String"/>

<force:recordData aura:id="AccountRecordEdit"
    layoutType="FULL"
    recordId="{!v.recordId}"
    fields="Name"
    targetError="{!v.newAccountError}"
    targetRecord="{!v.accountRecord}"
    targetFields="{!v.simpleNewAccount}"
    mode="EDIT"/>

<div class="Record Details">
    <lightning:card iconName="action:edit" title="Edit Account">
     <div class="slds-p-horizontal--small">
        <lightning:input label="Account Name" value="{!v.accountRecord.Name}"/>
        <br/>
        <lightning:button label="Save Account" variant="brand" onclick="{!c.handleSaveRecord}" />
     </div>
    </lightning:card>
</div>

<!-- Display Lightning Data Service errors, if any -->
 <aura:if isTrue="{!not(empty(v.recordError))}">
    <div class="recordError">
    {!v.recordError}
    </div>
 </aura:if> 
</aura:component>

Controller:

({
    handleSaveRecord : function(component, event, helper) {
        component.find("AccountRecordEdit").saveRecord($A.getCallback(function(saveResult) {
            if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") {
                console.log("Save completed successfully.");
            }else if (saveResult.state === "INCOMPLETE") {
                console.log("User is offline, device doesn't support drafts.");
            }else if (saveResult.state === "ERROR") {
                JSON.stringify(saveResult.error));
            }else {
                console.log('Unknown problem, state: ' + saveResult.state + ', error: ' + 
                JSON.stringify(saveResult.error));
            }

        }
    }
})

I used the component in a records page. I created a new records page for Account object using Lightning App Builder.

When I try to select an account to see the record page I created:

I now try to type in a name in the field. It shows up below error. What I may be missing here? I tried accessing the Name of the account like - <lightning:input label="Account Name" value="{!v.accountRecord.Fields.Name.Value}"/> but resulted in the same error.

Answer 1

1.whenever Target record is used syntax is bit diffrenet rather than targetFields you want to use like this {!v.accountRecord.fields.Name.value} because you acccessing via Fields schema.

2.you are placing your component in record page force:hasRecordid automatically inherits the record Id attribute no need to explicitly define use recordId="{!v.recordId}" not recordId="{!v.accountRecordId}"

Example :

Component:

<aura:component implements="flexipage:availableForAllPageTypes,force:hasRecordId">
<aura:attribute name="accountRecord" type="Object"/>    
<aura:attribute name="simpleNewAccount" type="Object"/>
<aura:attribute name="newAccountError" type="String"/>

<force:recordData aura:id="AccountRecordEdit"
    layoutType="FULL"
    recordId="{!v.recordId}"
    fields="Name"
    targetError="{!v.newAccountError}"
    targetRecord="{!v.accountRecord}"
    targetFields="{!v.simpleNewAccount}"
    mode="EDIT"/>

<div class="Record Details">
    <lightning:card iconName="action:edit" title="Edit Account">
     <div class="slds-p-horizontal--small">
        <lightning:input label="Account Name" value="{!v.accountRecord.fields.Name.value}"/>
        <br/>
        <lightning:button label="Save Account" variant="brand" onclick="{!c.handleSaveRecord}" />
     </div>
    </lightning:card>
</div>

<!-- Display Lightning Data Service errors, if any -->
 <aura:if isTrue="{!not(empty(v.recordError))}">
    <div class="recordError">
    {!v.recordError}
    </div>
 </aura:if> 
</aura:component>

Answer 2

The controller in the question has some syntax errors. Use the below controller:

({ 
    handleSaveRecord : function(component, event, helper) { 
        component.find("AccountRecordEdit").saveRecord($A.getCallback(function(saveResult) { 
            if (saveResult.state === "SUCCESS" || saveResult.state === "DRAFT") { 
                console.log("Before success message");
                component.set("v.message","Success");
                console.log("////Save completed successfully."); 
            }else if (saveResult.state === "INCOMPLETE") { 
                console.log("User is offline, device doesn't support drafts."); 
            }else if (saveResult.state === "ERROR") { 
                JSON.stringify(saveResult.error); 
            }else { 
                JSON.stringify(saveResult.error); 
            } 
        })) 
    } 
})