Adding Captcha V2 in Angular has( Error: Missing required parameters: sitekey)

user_3301085 0
Viewed 1419

Here I have an error when adding Recaptcha V2 inside a simple Angular Page, I have only a little knowledge in Angular, the html file and component.ts file are mentioned here.

I am trying to send this form along with the token to a API on Laravel and validate inside Laravel and return only a Success or a Error message in angular page.

The error inside my console is with the recaptcha ngx-recaptcha2 tag :(I have tried this recaptcha tag in many format but not sure if the code is correct So I went with this method which I have seen in a Internet)

Unhandled Promise rejection: Missing required parameters: sitekey ; Zone: ; Task:
Promise.then ; Value: Error: Missing required parameters: sitekey
l recaptcha__en.js:226
rL recaptcha__en.js:401
r recaptcha__en.js:336
C7 recaptcha__en.js:480
q recaptcha__en.js:176
renderReCaptcha ngx-captcha.js:328
Angular 3
renderReCaptcha ngx-captcha.js:324
onloadCallback ngx-captcha.js:393
setupComponent ngx-captcha.js:373
Angular 5
this.windowOnLoadCallbackProperty ngx-captcha.js:51

<form #myform="ngForm" (ngSubmit)="onSubmit(myform)">
                                
    <div class="form-group">
    <!--<label>Your Name</label>-->
      <input type="text" class="form-control" placeholder="Enter Your Name" id="inputName" name="name" [(ngModel)]="name" />
    </div>

    <div class="form-group">
    <!--<label>Email</label>-->
       <input type="email" class="form-control" placeholder="Enter your email" id="inputEmail" name="email" [(ngModel)]="email" />
     </div>

     <div class="form-group">
     <!--<label>Phone No</label>-->
        <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">
      <!--<label>City Name</label>-->
          <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 = "6LcN0IIaAAAAAPXCb2qdz7JxgJSeuycDQDMaxK9R";
   this.siteKey = "6LcwHUEaAAAAAIiWj1j8EYHDXuHl1_HZatabWR9U";
  }
  
 
  ngOnInit() {

    this.aFormGroup = this.formBuilder.group({
      recaptcha: ['', Validators.required]
    });    

  } ```


  [1]: https://i.stack.imgur.com/dim7Q.png
angular typescript submit recaptcha forms
2 Answers

I case someone comes to this Error, After A lot searching there was a fix to this issue.

Add some codes,
Just import ElementRef , ViewChild. Then two function renderReCaptch(), addRecaptchaScript().
Then 'this.addRecaptchaScript()' inside ngOnInit. In HTML part is a new empty div with a Id = "recaptcha".

Kindly compare the files in question and also the files in this answer.Its a Easy fix Good Luck :)

.html file and component.ts file

import { Component, OnInit, ElementRef, ViewChild } 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']
})<br>
export class HomeComponent implements OnInit {  

  @ViewChild('recaptcha', {static: true }) recaptchaElement: ElementRef;
  
  protected aFormGroup: FormGroup;
  
  siteKey: string;
 
  
  constructor(private formBuilder: FormBuilder,private http: HttpClient,private reCaptchaV3Service: ReCaptchaV3Service) 
  {  
   this.siteKey = "SiteKey";
  }
  
 
  ngOnInit() {
    this.addRecaptchaScript();      

  }

  renderReCaptch() {
    window['grecaptcha'].render(this.recaptchaElement.nativeElement, {
      'sitekey' : 'SiteKey',
      'callback': (response) => {
          console.log(response);
      }
    });
  }

  addRecaptchaScript() {
 
    window['grecaptchaCallback'] = () => {
      this.renderReCaptch();
    }
 
    (function(d, s, id, obj){
      var js, fjs = d.getElementsByTagName(s)[0];
      if (d.getElementById(id)) { obj.renderReCaptch(); return;}
      js = d.createElement(s); js.id = id;
      js.src = "https://www.google.com/recaptcha/api.js?onload=grecaptchaCallback&amp;render=explicit";
      fjs.parentNode.insertBefore(js, fjs);
    }(document, 'script', 'recaptcha-jssdk', this));
 
  }
}

html file
<div class="form-group ml-4">
  <div #recaptcha ></div>
</div>
user_33010850

Component.ts file

siteKey: any = "";
ngOnInit(): void {
this.aFormGroup = this.formBuilder.group({
  recaptcha: ['', Validators.required]
});    
this.siteKey = "your site key";
}

Html

<ngx-recaptcha2 #captchaElem
          [siteKey]="siteKey"
          formControlName="recaptcha">
        </ngx-recaptcha2>
user_117531090
Related