Not able to insert data successfully

Question

I am trying to create a lightning component through which I would be able to insert both Account and Contact data together. But I am not able to do so. Can anyone kindly let me know why this is happening? The code that I've written is below. Thanks in advance.

AccountChildConComp.cmp

<aura:component controller="AccountsChildConCtrl">
    <aura:attribute name='acc' type='Account' default='{sObjectType:"Account"}'/>
    <aura:attribute name='con' type='Contact' default='{sObjectType:"Contact"}'/>

    <aura:attribute name='myVal' type='String'/>
    <aura:attribute name='resultVal' type='Id'/>    

    <lightning:card title='SObject Forms'>
        <lightning:tabset selectedTabId='{!v.myVal}'>
            <lightning:tab label='Account' id='accId'>
                <lightning:input label='Account Name' value='{!v.acc.Name}'/>
                <lightning:input label='Phone' value='{!v.acc.Phone}'/>
                <lightning:input label='Annual Revenue' value='{!v.acc.AnnualRevenue}'/>
                <lightning:input label='Rating' value='{!v.acc.Rating}'/>
                <br/>
                <center>
                    <lightning:button label='next' onclick='{!c.nextFunction}'/>
                </center>
            </lightning:tab>
            <lightning:tab label='Contact' id='conId'>
                <lightning:input label='First Name' value='{!v.con.FirstName}'/>
                <lightning:input label='Last Name' value='{!v.con.LastName}'/>
                <lightning:input label='Phone' value='{!v.con.Phone}'/>
                <lightning:input label='Email' value='{!v.con.Email}'/>
                <br/>
                <center>
                    <lightning:button label='Previous' onclick='{!c.prevFunction}'/>
                    <lightning:button label='Create' onclick='{!c.finishFunction}'/>
                </center>            
            </lightning:tab>
        </lightning:tabset>
    </lightning:card>
    {!resultVal}
</aura:component>

AccountChildConCompController.js

({
    nextFunction : function(component, event, helper) {
        var val = component.get('v.myVal');
        if (val == 'accId') {
            component.set('v.myVal', 'conId');
        } 
    },
    prevFunction : function(component, event, helper) {
        var val = component.get('v.myVal');
        if (val == 'conId') {
            component.set('v.myVal', 'accId');
        }       
    },
    finishFunction : function(component, event, helper) {
        var accs = component.get('v.acc');
        var cons = component.get('v.con');

        var action = component.get('c.createParentChildsRecord');
        action.setParams({'acc':accs, 'con':cons});
        action.setCallback(this, function(response){
            var state = response.getState();
            if(state === "SUCCESS"){
                var result = response.getReturnValue();
                component.set('v.resultVal',result);
            } else {
                console.log('Failed');
                component.set('v.resultVal','Failed');
            }
        });
        $A.enqueueAction(action);
    }
})

AccountsChildConCtrl.apxc

public class AccountsChildConCtrl {
    @AuraEnabled
    public static Id createParentChildsRecord(Account acc, Contact con) {
        Id result = '';
        SavePoint sp = Database.setSavepoint();

        try{
            insert acc;

            con.AccountId = acc.Id;
            Insert con;

            result = ''+acc.Id;
        }catch(Exception e){
            Database.rollback(sp);
        }
        return result;
    }
}

AccountChildConCompApp.app

<aura:application extends="force:slds">
    <c:AccountChildConComp/>
</aura:application>

Answer 1

The problem lies in your Apex class. You were getting the system.stringException. See the image below. It is because you were assigning a string value to ID type field in your apex method(Id result = '';). So when your trying to assign an empty value for Id field we have to specify null keyword instead of an empty space('')

Replace your apex method with below code:-

public class AccountsChildConCtrl {
    @AuraEnabled
    public static Id createParentChildsRecord(Account acc, Contact con) {
        Id result;
        SavePoint sp = Database.setSavepoint();

        try{
            insert acc;

            con.AccountId = acc.Id;
            Insert con;

            result = acc.Id;
        }catch(Exception e){
            Database.rollback(sp);
        }
        return result;
    }
}