CiscoKidx CiscoKidx - 3 months ago 13
AngularJS Question

Cannot read property 'value' of null | angular-recaptcha

In my SPA I am using angular-recaptcha. I have a reCaptcha form in two separate places. If I complete any of the reCaptchas I cannot complete the other or the same one again until I clear my cache.

Error:


Cannot read property 'value' of null


I found some resources online like:
https://gedgei.wordpress.com/2015/08/07/using-recaptcha-in-single-page-applications/

I followed that guide to the best of my ability and the error persists.

html:

<div class="g-recaptcha" vc-recaptcha key="publicKey" on-create=getRecaptchaId(widgetId)">


controller:

var newWidgetId;

$scope.getWidgetId = function(widgetId) {
newWidgetId = widgetId;
return;
};

var reCaptcha = vcRecaptchaService.getResponse(newWidgetId)

Answer

Your on-create event handler getRecaptchaId(widgetId) is not bounded to the scope of your controller.

On your controller, change:

var getWidgetId = function(widgetId) {
    newWidgetId = widgetId;
    return;
};

To:

$scope.getRecaptchaId = function(widgetId) {
    newWidgetId = widgetId;
    return;
};
Comments