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

Question

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

标签： angulartypescriptformssubmitrecaptcha

Answer 1

组件.ts 文件

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>