How can I run a function that calls an Apex Method, inside the input validation function?

Question

I need to save the user input (signature as a file, by calling an Apex Method) when the user clicks the standard "next" button in the flow screen, I am using user input validation for flow screens, so whenever I click next, I get the validation message telling me there's no signature, because the imported function returns a promise.

Basically, I'm trying to save the user input in the validation function, but I can't because of the async processing.

How can I tackle this?

What I tried:

Enclosing the saving signature logic inside a delay function:

var delayInMilliseconds = 1000; //1 second
setTimeout(function() {
    // Call Apex method logic
}, delayInMilliseconds);

Answer 1

Easiest way would be to just show a spinner until the action of your Apex logic is executed successfully. The spinner will indicate that some processing is happening and the overlay of the spinner will hide the Next button.

@api
validate() {
    // Call Apex method logic
    callApexMethod().then(data => {
        //stop showing Spinner
    }).catch(error => {
        //stop showing Spinner
    })
}

I have never tried async await on validate, but try this one too and check.

@api
async validate() {
    // Call Apex method logic
    const result2 = await callApexMethod({
        anyParam: anyParamValue
    });

    // return true or false from apex.
    if(/* true conditions from result2*/) {
        return { isValid: true };
    }
    else {
        // If the component is invalid, return the isValid parameter 
        // as false and return an error message. 
        return {
            isValid: false,
            errorMessage: '/*A message that explains what went wrong.*/'
        };
    }
}