Comments (11)
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.
Related Issues (20)
- ng-recaptcha _502-gateway issue HOT 1
- Angular v16 support HOT 10
- Getting accessibility issue using JAWS screen reader when using recaptcha v2 sitekey HOT 6
- There is no way to know if a user pressed escape on the puzzle HOT 1
- What is the recommended way to load recaptcha when site key comes from back-end HOT 4
- Invalid site key or not loaded in api.js HOT 2
- Invisible using overloaded submit loses token and doesn't recover HOT 3
- Help!!!
- No way to make v3 invisible HOT 2
- Add support for Trusted Types HOT 1
- Cannot vertically scroll images in recaptcha on mobile popup HOT 1
- Can't bind to 'siteKey' since it isn't a known property of 're-captcha' HOT 3
- Feature Request Support for WAF HOT 1
- Standard Angular Standalone app giving NullInjectionError: R3InjectorError error HOT 2
- Upgrade to Angular 17? HOT 6
- Angular v17 Support HOT 1
- How to handle errors on older Angular and ng-recaptcha versions
- Issue with Recaptcha Loading
- Chrome Issue: recaptcha Reading cookie in cross-site context will be blocked in future Chrome versions
- Angular 18 Support HOT 9
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from ng-recaptcha.