在 Angular 中添加 Captcha V2 有错误：缺少必需的参数：sitekey

如何解决在 Angular 中添加 Captcha V2 有错误：缺少必需的参数：sitekey

这里我在一个简单的Angular Page中添加Recaptcha V2时出现错误，我对Angular只有一点点了解，这里提到了html文件和component.ts文件。

我正在尝试将此表单与令牌一起发送到 Laravel 上的 API 并在 Laravel 内部进行验证并仅在角度页面中返回成功或错误消息。

我的控制台中的错误是 recaptcha ngx-recaptcha2 标签:(我尝试了多种格式的这个 recaptcha 标签，但不确定代码是否正确所以我使用了我在互联网上看到的这种方法）

未处理的承诺拒绝：缺少必需的参数：sitekey；区域： ;任务：
Promise.then ；值：错误：缺少必需的参数：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
角 3
renderReCaptcha ngx-captcha.js:324
onloadCallback ngx-captcha.js:393
setupComponent ngx-captcha.js:373
角 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

解决方法

如果有人遇到此错误，经过大量搜索后，此问题已得到解决。

添加一些代码，
只需导入 ElementRef 、 ViewChild 。然后两个函数renderReCaptch(),addRecaptchaScript().
然后ngOnInit里面的'this.addRecaptchaScript()'。在 HTML 部分是一个新的空 div，其 Id = "recaptcha"。

请比较有问题的文件和这个答案中的文件。这是一个简单的修复祝你好运:)

.html 文件和 component.ts 文件

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>