angular-recaptcha icon indicating copy to clipboard operation
angular-recaptcha copied to clipboard

Resetting Recaptca on complete?

Open spacebiscuit opened this issue 8 years ago • 2 comments

Once my form has been verified and I have processed the forms data, when complete I want to reset my form. I am doing this as follows:

$scope.contactForm.name = null;
$scope.contactForm.emailAddress = null;
$scope.contactForm.message = null;
$scope.contactForm.myRecaptchaResponse = null;							
$scope.contactForm.$setPristine();

This works except for the re-captcha input, how can I reset this?

spacebiscuit avatar Jun 22 '17 19:06 spacebiscuit

I had the same issue. a temporary hack/workaround could do the job now until issue is fixed.

  • create an array in controller which contains only one element: this.recaptchers = [{}]
  • on form submit/completion beside you set it's model to null or undefined or '' you should do this too : this.recaptchers.splice(0,1); this.recaptchers.push({});
  • in your markup instead of doing this : <div vc-recaptcha ng-model="$ctrl.myRecaptchaResponse" required></div> you need to do this : <div ng-repeat="recaptcher in $ctrl.recaptchers" vc-recaptcha ng-model="$ctrl.myRecaptchaResponse" required></div>

it must erase the previous recaptcha and put a brand new one there in blink of an eye. : )

aghArdeshir avatar Aug 29 '17 12:08 aghArdeshir

You can inject the Recaptcha Service into your controller and reset it there. Typescript example:

module app {
[...]
this.$scope.contactForm.name = null;
this.$scope.contactForm.emailAddress = null;
this.$scope.contactForm.message = null;
this.$scope.contactForm.myRecaptchaResponse = null;							
this.$scope.contactForm.$setPristine();

this.vcRecaptchaService.reload();
[...]
angular.module('app').controller('Controller', ['$scope', 'vcRecaptchaService']);
}

stanglt avatar Apr 06 '18 05:04 stanglt