Record ID is not passing from Aura component to LWC component

Question

I have a requirement to validate a few fields before submitting the record. I have created an Aura component and calling the LWC code to do some validation.

Aura Cmp:

<aura:component implements="flexipage:availableForRecordHome,force:lightningQuickActionWithoutHeader, force:hasRecordId">
    Record ID: {!v.recordId}
    <c:submitButton recordId="{!v.recordId}" />
</aura:component>

Lightning code:

import { LightningElement, api } from 'lwc';

export default class SubmitButton extends LightningElement {
    @api recordId;

    connectedCallback()
    {
        alert('Record ID'+recordId);
    }
}

Output:

My issue is:

1. I am not able to see the alert message which I have in LWC component
2. I don't want to see this Aura component when Submit Button is clicked.

what is the mistake I did?

Answer 1

You are doing syntax error. Your alert should be

alert('Record ID'+this.recordId);

For second point you need to close quick action modal from LWC. So call event from LWC to aura component and then in Aura component close this modal.

<aura:component implements = "force:lightningQuickAction, force:hasRecordId" >
    <c:lwcQA recordId="{!v.recordId}" onclose="{!c.closeQA}"/>
</aura:component>
({
    closeQA : function(component, event, helper) {
        $A.get("e.force:closeQuickAction").fire();
    }
})

You can find detail working reference here: Close Quick Action from Lightning Web Components