Encountering an issue adding Recaptcha V2 to a simple Angular Page, my knowledge in Angular is limited. The HTML file and component.ts file are referenced below.
Attempting to send this form along with the token to a Laravel API for validation, and return a Success or Error message in the Angular page.
Getting an error in the console related to the recaptcha ngx-recaptcha2 tag. Tried multiple formats without success, so went with a method seen on the Internet.
Unhandled Promise rejection: Missing required parameters: sitekey; Zone:; Task:
Promise.then; Value: Error: Missing required parameters: sitekey
<form #myform="ngForm" (ngSubmit)="onSubmit(myform)">
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Your Name" id="inputName" name="name" [(ngModel)]="name" />
</div>
<div class="form-group">
<input type="email" class="form-control" placeholder="Enter your email" id="inputEmail" name="email" [(ngModel)]="email" />
</div>
<div class="form-group">
<input type="tel" class="form-control" placeholder="Enter Your Phone No" id="inputPhone" oninput="process(this)" maxlength ="12" minlength ="10" name="phone" [(ngModel)]="phone" />
</div>
<div class="form-group">
<input type="text" class="form-control" placeholder="Enter Your City Name" id="inputCity" name="city" [(ngModel)]="city"/>
</div>
<div class="form-group ml-4">
<ngx-recaptcha2 #captchaElem name="siteKey" [(ngModel)]="siteKey">
</ngx-recaptcha2>
</div>
<div class="form-group">
<img src="assets/img/banner-image/payment-icon.png" alt="image">
</div>
<button type="submit" class="btn btn-gradient">Download</button>
</form>
component.ts file
import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, NgForm, Validators } from '@angular/forms';
import { HttpClient, HttpHeaders } from '@angular/common/http'
import { ReCaptchaV3Service } from 'ngx-captcha';
@Component({
selector: 'app-home',
templateUrl: './home.component.html',
styleUrls: ['./home.component.css']
})
export class HomeComponent implements OnInit {
protected aFormGroup: FormGroup;
siteKey: string;
constructor(private formBuilder: FormBuilder,private http: HttpClient,private reCaptchaV3Service: ReCaptchaV3Service) {
this.siteKey = "6LcwHUEaAAAAAIiWj1j8EYHDXuHl1_HZatabWR9U";
}
ngOnInit() {
this.aFormGroup = this.formBuilder.group({
recaptcha: ['', Validators.required]
});
}