Question

我刚开始使用Angular并在角度7中工作。我在应用程序中实现了recaptcha。 Recaptcha在复选框后创建。我安装了ng-recaptcha。现在我想要下一步，即重新验证recaptcha以获得成功。我怎么能在我的角度客户端内做到这一点？

提前致谢。这是我的代码供参考。

这是我的login.component.html

//login.component.html

<link rel="stylesheet" 
href="https://use.fontawesome.com/releases/v5.0.8/css/all.css">

<div class="container"><br>
<h2 class="text-center">Welcome to TEL</h2>
<hr>

<div class="row">
<aside class="col-sm-8">
<p>User Login</p>

<div class="card">
<article class="card-body">
<h4 class="card-title text-center mb-4 mt-1">Sign in</h4>
<hr>
<p class="text-success text-center"></p>
<form role="form" class="form-horizontal" (submit)="loginUser($event)" 
[formGroup]="loginForm" >

<div class="form-group">
<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text"> <i class="fa fa-user"></i> </span>
     </div>
<input [formControl]="email"  autocomplete="off"  class="form-control" 
placeholder="Please enter username" type="email">

</div> <!-- input-group.// -->
</div> <!-- form-group// -->
<div class="alert alert-danger" *ngIf="email.invalid && (email.dirty || 
email.touched)"  >
    <div *ngIf="email.errors.required"> 
        email is required
    </div>
</div>

<div class="form-group">
<div class="input-group">
    <div class="input-group-prepend">
        <span class="input-group-text"> <i class="fa fa-lock"></i> </span>
     </div>
  <input class="form-control" placeholder="Please enter password" 
type="password" 
   [formControl]="password">
</div> <!-- input-group.// -->
</div> <!-- form-group// -->
<div class="alert alert-danger" *ngIf="password.invalid && (password.dirty 
|| password.touched)">
    <div *ngIf="password.errors.required">
        password is required
    </div>
 </div>



 <div class="form-group">
        <re-captcha (resolved)="resolved($event)" 
siteKey="6LemCKQUAAAAANmNflhJTpvECQclp4K89GYFEaXn" ></re-captcha>
 </div>

<div class="form-group">
<button type="submit"   class="btn btn-primary" 
[disabled]="loginForm.invalid" >Sign In</button>
</div>
  <p class="text-center"><a [routerLink]="['/register']">Register Here</a> 
</p>
</form>
</article>
</div> <!-- card.// -->
</aside> <!-- col.// -->
</div> <!-- row.// -->
</div> 
<!--container end.//-->

这是我的login.componet.ts文件

//login.component.ts
recaptcha: any; 

resolved(captcharesponse: any[]){
this.recaptcha  = captcharesponse;
console.log(this.recaptcha,"Captain America");
localStorage.setItem('recaptcha',this.recaptcha);
}

这是我的index.html

<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>TestTEl1</title>
<base href="/">
<script src="https://www.google.com/recaptcha/api.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="icon" type="image/x-icon" href="favicon.ico">
</head>
<body>
<app-root></app-root>
</body>
</html>

如何验证recaptcha发送成功响应以启用表单提交角度？

0 个答案: