I'm trying to use Lightning Data Service feature to create new Case record by relating it to that particular contact & it's account from Contact Record Detail Page. Added "Create Related Case" button on the Contact Record Detail Page and related with lightning component mentioned below.

Error in UI:
Error
An error was encountered trying to save this case. Please review and correct any errors before submitting.

Error in Console:
Problem saving case, response state: [{"fieldErrors":{},"pageErrors":[]}]

CreateCaseWithLDS.cmp
<aura:component implements="force:lightningQuickAction,flexipage:availableForRecordHome,force:hasRecordId" access="global">
    <aura:attribute name="newCase" type="Case" default="{ 'sobjectType': 'Case' }" />
    <aura:attribute name="contact" type="Contact" />
    <aura:attribute name="recordId" type="Id" />
    <aura:attribute name="hasErrors" type="Boolean" />
    <aura:attribute name="message" type="String" />
    <aura:attribute name="contactError" type="String" />
    <force:recordData aura:id="contactRecordLoader"
                         recordId="{!v.recordId}"
                         fields="Name,AccountId"
                         targetRecord="{!v.contact}"
                         targetError="{!v.contactError}" />
    <aura:attribute name="caseError" type="String" />
    <force:recordData aura:id="caseRecordCreator"
                         layoutType="FULL"
                         targetRecord="{!v.newCase}"
                         targetError="{!v.caseError}" />
    <aura:handler name="init" value="{!this}" action="{!c.doInit}" />
    <div class="slds-page-header" role="banner">
        <p class="slds-text-heading--label">{!v.contact.Name}</p>
        <h1 class="slds-page-header__title slds-m-right--small
            slds-truncate slds-align-left">Create New Case</h1>
    </div>
    
    <aura:if isTrue="{!v.hasErrors}">
        <div class="recordSaveError">
            <ui:message title="Error" severity="error" closable="true">
                An error was encountered trying to save this case.
                Please review and correct any errors before submitting.
            </ui:message>
        </div>
    </aura:if>
    
    <aura:if isTrue="{!not(empty(v.message))}">
        <div class="recordSaveSuccess">
            <ui:message >
                {!v.message}
            </ui:message>
        </div>
    </aura:if>
    <div class="slds-form--stacked">
        <lightning:input required="true" type="input" aura:id="Subject" 
                         label="Subject:" value="{!v.newCase.Subject}" />
        
        <lightning:textArea required="true" aura:id="Descrption" maxlength="1000"
                          label="Descrption:" value="{!v.newCase.Descrption}" />
        
        <br />
        <lightning:button variant="brand" label="Save Case" onclick="{!c.saveCase}" />
    </div>
</aura:component>   

CreateCaseWithLDSController.js
({
    doInit : function(component, event, helper) {
        console.log(component.get("v.contact.Name"));
        console.log(component.get("v.contact.AccountId"));
        component.find("caseRecordCreator").getNewRecord(
            "Case",
            null,
            false,
            $A.getCallback(function() {
                var rec = component.get("v.newCase");
                var error = component.get("v.caseError");
                if(error || (rec === null)){
                    console.log("Error initializing record template: " + error);
                }
            })
        );
    },
    saveCase : function(component, event, helper){
        component.set("v.hasErrors", false);
        component.set("v.newCase.Status", 'New');
        component.set("v.newCase.ContactId", component.get("v.recordId"));
        console.log(component.get("v.recordId"));
        component.set("v.newCase.AccountId", component.get("v.contact.AccountId"));
        console.log(component.get("v.contact.AccountId"));
        component.find("caseRecordCreator").saveRecord(
            function(saveResult){
                if(saveResult.state === "SUCCESS" || saveResult.state === "DRAFT"){
                    component.set("v.message","Case was saved successfully!");
                    var resultsToast = $A.get("e.force:showToast");
                    resultsToast.setParams({
                        "title": "Saved",
                        "message": "The record was saved."
                    });
                    resultsToast.fire();
                }
                else if(saveResult.state === "ERROR"){
                    component.set("v.hasErrors", true);
                    console.log("Problem saving case, response state: " + JSON.stringify(saveResult.error));
                }
                else{
                    component.set("v.hasErrors", true);
                    console.log('Unknown problem, response state: ' + saveResult.state + ", error: "+ JSON.stringify(saveResult.error));
                }
            }
        );
    }
})

Not able to find out what's causing failure. Need help.


Thanks,
Vinay