How do I programmatically call resolve(event)? about ng-recaptcha HOT 11 CLOSED

Starring this repo is enough of a tip for me :)

from ng-recaptcha.

What are you trying to achieve? I'm not quite sure.

You are not supposed to invoke resolved, just listen to it. This event is an indication that reCaptcha has been resolved.

from ng-recaptcha.

Initially, I wanted to have captcha in one component and call it from the other component via service thus I needed to call captcha check and get the value programmatically. I connected the service calls from component to component but I can't get the captcha value. Is there any way of achieving that?

from ng-recaptcha.

Okay, good. I'm assuming that you're trying to encapsulate <ng-recaptcha> into a custom component. Well, all you have to do is re-emit the resolved event from your wrapper component like this:

import { Component, EventEmitter, Output } from '@angular/core';

@Component({
  selector: 'my-recaptcha',
  template: `<ng-recaptcha (resolved)="resolved.emit($event)" ...></ng-recaptcha>`
}) export class MyRecaptchaComponent {
  @Output()
  public resolved = new EventEmitter<string>();
}

Let me know if that's what you're looking for

from ng-recaptcha.

That's not entirely what I meant but on the right track.

What I have is app-root component, inside of which I placed the captcha and then a child component, the form component, that will trigger the verification. if I do everything inside a component I successfully get the returned value and I can pass it to the backend but I separate two things, I can't get the key value no matter. The way I try doing it is by calling this.captcha.execute() and then trying to read the emitter you mentioned in your previous comment, but it only outputs the emitter itself. Hope I could clarify that.

from ng-recaptcha.

Smth like this

ngAfterViewInit() {
    console.log('Running after view init');
    this.captcha.execute();
    this.captcha.resolved.subscribe((event) => {
      console.log(event);
    });
  }

So instead of event console.log I can capture the value and pass it to the service.

from ng-recaptcha.

So, let's see if I got this right. You have something like this in your app.component.html

<re-captcha ...></re-captcha>
<my-child-form></my-child-form>

And you want to kinda request captcha verification from <my-child-form>. In that case, you could do this:

<re-captcha
  (resolved)="captchaValue = $event"
  #captchaRef="reCaptcha" ...
></re-captcha>
<my-child-form
  [captcha]="captchaValue"
  (requestCaptcha)="captchaRef.execute()
"></my-child-form>

So, you're basically adding an @Input() captcha and an @Output() requestCaptcha to <my-child-form>.

Does this help? If something is still unclear, could you please clarify a bit further?

from ng-recaptcha.

Thanks a lot for your rapid assistance. Apologies for my lack of knowledge, I am still very much learning Angular so derpy code incoming.

So I incorporated changes you've mentioned

<md-sidenav-container (pan)="swipeSidenav($event)" mode="over">
  <md-sidenav #sidenav>
    <app-sidenav-content></app-sidenav-content>
  </md-sidenav>
  <nav class="mat-elevation-z4">
    <app-top-nav></app-top-nav>
  </nav>
  <header>
    <app-intro id="home"></app-intro>
  </header>
  <main>
    <app-primary-offer id="core"></app-primary-offer>
    <app-contact-form id="sign" [captcha]="captchaValue" (requestCaptcha)="captchaRef.execute()"></app-contact-form>
    <app-offer id="offers"></app-offer>
    <app-projects id="projects"></app-projects>
  </main>
</md-sidenav-container>
<re-captcha #captchaRef="reCaptcha" size="invisible" siteKey="key" (resolved)="captchaValue = $event"></re-captcha>

Added

@Input() captcha;
@Output() requestCaptcha;

to my contact-form.component.ts but nothing is happening. What am I supposed to do next?

from ng-recaptcha.

I am also getting

ERROR TypeError: Cannot read property 'subscribe' of undefined
    at createDirectiveInstance

for some reason after adding [captcha]="captchaValue" (requestCaptcha)="captchaRef.execute()"

from ng-recaptcha.

No worries, I'm here to help.

Quickly about the error: you're getting it because you haven't initialized the requestCaptcha property, e.g. requestCaptcha = new EventEmitter();.

So far so good. Now, I'm assuming that somewhere inside your <app-contact-form> you have a submit() method, right? Then, the expected behavior is this:

• User fills in the contact form
• he then presses "Send" button
• you're invoking reCAPTCHA validation, and when it succeeds you submit the form for realz.

This can be done like this, for example:

submit() {
  this.requestCaptcha.emit();
}

public ngOnChanges(changes) {
  if (changes.captcha && changes.captcha.currentValue) {
    // user has resolved the captcha
    var formValues = this.gatherFormFieldValues();
    formValues.captcha = changes.captcha.currentValue;
    this.contactService.submit(formValues);
  }
}

Again, this is just one example of how you could make it work. You could also propagate the whole RecaptchaComponent to your ContactForm, or propagate just the RecaptchaComponent.resolved event emitter, or do something entirely different.

I will close this issue because it is getting far beyond the scope of this library. I suggest that you come up with a way to implement it that suits your needs. If you have any Angular-related questions, then StackOverflow might be a better place for them.

I hope I helped you clarify ng-recaptcha related things

from ng-recaptcha.

Thanks a lot. You provided me with a lot of food for thought above and beyond! It wasn't my intention to steer the discussion outside of library scope. At the end of the day, I was just wondering if there is any way to call (click)="captchaRef.execute()" except inside .ts file and not html file?

this.captcha.execute() seems to do nothing :P

Otherwise, your solution seems to have worked. I used captcha way too many times so it asks me to fill images, but I assume if it wasn't asking then it would simply emit the value straight away.

P.S. Anyway I could perhaps give you a small tip for your trouble? you've been a great help!

from ng-recaptcha.