角15提交按钮未启用验证码验证[关闭]

问题描述 投票:0回答:0

嗨,我是 Angular 平台的新手,请有人帮助我 当我单击登录表单中的提交按钮时,角度为 15 的提交按钮未启用用户名、密码和验证码验证 如果我删除谷歌 Recaptcha 验证而不是启用此按钮。请为这个问题提供解决方案。

html
<section class="vh-100" style="background-color: #9A616D;">
    <div class="container py-4 h-100">
        <div class="row d-flex justify-content-center align-items-center h-100">
            <div class="col col-xl-10">
                <div class="card" style="border-radius: 1rem;">
                    <div class="row g-0">
                        <div class="col-md-6 col-lg-5 d-none d-md-block">
                            
                            <img src="../../assets/image/policeimage.jpeg" alt="Image"
                                class="img-fluid w-100 pt-4 border border-success h-100"
                                style="border-radius: 1rem 0 0 1rem;" />
                        </div>
                        <div class="col-md-6 col-lg-7 d-flex align-items-center">
                            <div class="card-body p-4 p-lg-5 text-black">



                                <div class="d-flex align-items-center mb-3 pb-1">
                                    <i class="fa fa-cubes fa-2x me-3" style="color: #ff6219;"></i>
                                    <span class="h2 fw-bold mb-0">Rajasthan Police</span>
                                </div>

                                <h5 class="fw-normal mb-3 pb-3" style="letter-spacing: 1px;">Sign into your account
                                </h5>
                                <form [formGroup]="userlogin" (ngSubmit)="usersubmit()">
                                    <div class="form-outline mb-3">
                                        <label class="form-label" for="form2Example17">SSO/USER ID</label>
                                        <input type="text" id="form2Example17" class="form-control form-control-lg"
                                            formControlName="username" />
                                        <span class="text-danger"
                                            *ngIf="username.errors?.['required'] && username.touched">Please Enter
                                            User Name</span>
                                    </div>

                                    <div class="form-outline mb-3">
                                        <label class="form-label" for="form2Example27">Password</label>
                                        <input type="password" id="form2Example27" class="form-control form-control-lg"
                                            formControlName="password" />
                                        <span class="text-danger"
                                            *ngIf="password.errors?.['required'] && password.touched">Please Enter
                                            Password</span>
                                    </div>
                                    <div class="from-group py-3">
                                        <ngx-recaptcha2 #captchaElem [siteKey]="sitekey" fromControlName="recaptcha"
                                            (success)="handleSuccess($event)"></ngx-recaptcha2>
                                    </div>

                                    <div class="pt-1 mb-3">
                                        <button class="btn btn-dark btn-lg btn-block" type="submit" 
                                            (click)="alert()" [disabled]="userlogin.invalid">Login</button>
                                    </div>
                                   
                                </form>
                                <!-- <button type="button" [disabled]=true
                                    style="background: #79CEA4 !important;color: #FFFFFF !important;font-size: 13px;font-weight: 600;margin-right: 20px"
                                    class="btn  btn-lg" (click)="alert()">submit</button> -->



                                <a class="small text-muted" href="#!">Forgot password?</a>
                                <p class="mb-3 pb-lg-2" style="color: #393f81;">Don't have an account? <a href="#!"
                                        style="color: #393f81;">Contact here</a></p>
                                <a href="#!" class="small text-muted">Terms of use.</a>
                                <a href="#!" class="small text-muted">Privacy policy</a>


                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</section>

-------------------------------------
ts file
import { Component, OnInit } from '@angular/core';
import { ToastrService } from 'ngx-toastr';
import Swal from 'sweetalert2';
import { FormBuilder, FormControl, FormGroup, Validators } from '@angular/forms';
import { NgxCaptchaModule } from 'ngx-captcha';

@Component({
  selector: 'app-user-login',
  templateUrl: './user-login.component.html',
  styleUrls: ['./user-login.component.css'],
  
})


export class UserLoginComponent implements OnInit {
  
  
  public userlogin: any = FormGroup;
  public captchaResolved: boolean = false;
  sitekey: string = "6LcTn8IkAAAAAFCZAObh4j7nx6iwVFfrDhKCvMTx";

  


  constructor(private toastr: ToastrService, private fb: FormBuilder) { }
  ngOnInit() {
    this.userlogin = this.fb.group({
      username: new FormControl('', Validators.required),
      password: new FormControl('', Validators.required),
      recaptcha: ['', ]
    })

    // this.toastr.success('Hello', 'Success');
    // this.toastr.info('Hello', 'Info');
    // this.toastr.warning('Hello', 'Warning');
    // this.toastr.error('Hello', 'Error');



  }
  
  handleSuccess(eve: any) {
   this.captchaResolved = eve.length > 0;
   
  }

  get username() {
    return this.userlogin.get('username');
  }
  get password() {
    return this.userlogin.get('password');
  }
  usersubmit(){}

  alert() {
 

 
  
    Swal.fire({
      title: 'Do you want to Login?',
      showDenyButton: true,
      showCancelButton: true,
      confirmButtonText: 'Login',
      denyButtonText: `Don't Login`,
    }).then((result) => {
      
      if (result.isConfirmed) {
        Swal.fire('Login!', '', 'success')
      } else if (result.isDenied) {
        Swal.fire('not Login', '', 'info')
      }
    });

  }

}




嗨,我是 Angular 平台的新手,请有人帮助我 当我单击登录表单中的提交按钮时,角度为 15 的提交按钮未启用用户名、密码和验证码验证 如果我删除谷歌 Recaptcha 验证而不是启用此按钮。请为这个问题提供解决方案。

forms validation button recaptcha angular-ng-if
© www.soinside.com 2019 - 2024. All rights reserved.