时间戳

首页 > 解决方案 > 除非在 reCAPTCHA 验证后更改另一个元素，否则 ion-button [disabled] 不起作用

html - 除非在 reCAPTCHA 验证后更改另一个元素，否则 ion-button [disabled] 不起作用

问题描述

似乎输入验证工作正常（即正则表达式、名称大小、选择），因为只要任何其他输入更新（并且有效）并且验证码在更改之前已完成，就可以选择“提交”按钮。然而，当验证码最后完成时，离子按钮仍然被禁用，尽管所有输入都有效，包括验证码。就好像 ion-button [disable] 属性在 recaptcha 成功时不会刷新，并且仅在更新任何其他输入时才会刷新。

HTML：

<form #testForm="ngForm" (ngSubmit)="submitForm()">
            <ion-radio-group value="{{selectTest}}" [(ngModel)]="selectTest" name="selectTest" mode="md">
                <ion-radio value="Test1" (click)="selectTest='test1'"></ion-radio>
                <ion-label>Test1</ion-label>
                <ion-radio value="Test2" (click)="selectTest='test1'"></ion-radio>
                <ion-label>Test2</ion-label><br>
            </ion-radio-group>
            <ion-item class="cust_input" lines="none">
                <ion-input
                    [(ngModel)]="firstName"
                    name="firstName">
                </ion-input>
            </ion-item>
            <ion-item class="input" lines="none">
                <ion-label position="floating" class="required">Email</ion-label>
                <ion-input
                    [(ngModel)]="email"
                    placeholder="ex: email@yahoo.com"
                    name="email">
                </ion-input>
            </ion-item>
            <div id="capcha_element" class="g-recaptcha" data-callback="getResponseCapcha" data-expired-callback="getExpiredResponse" [attr.data-sitekey]="siteKey"></div>
            <ion-button 
                mode="ios"
                type="submit"
                [disabled]="firstName.trim().length<1
                || !emailRegex.test(email)
                || selectTest==''
                || !captchaSuccess"
            >
                Submit
            </ion-button>
        </form>

TS：

import { FormBuilder, FormGroup, Validators } from '@angular/forms';
export class TestPage{
  constructor(
      public captchaSuccess: boolean = false;
  )
  ngOnInit() {
      this.contactForm = this.formBuilder.group({
        recaptcha: ['', Validators.required]
      });
      grecaptcha.render('capcha_element', {
        'sitekey': this.siteKey,
      });
      window['getResponseCapcha'] = this.getResponseCapcha.bind(this);
      window['getExpiredResponse'] = this.getExpiredResponse.bind(this);
  }
  getResponseCapcha(captchaResponse: string) {
      this.captchaSuccess = true;
  }
  getExpiredResponse() {
    this.captchaSuccess = false;
  }

任何想法为什么会发生这种情况？

标签： htmlangularformsionic-frameworkrecaptcha

解决方案

尝试使用 ngZone：

在构造函数中：public ngZone: NgZone

不要忘记import { NgZone } from '@angular/core';

然后：

getResponseCapcha(captchaResponse: string) {
    this.ngZone.run(() => this.captchaSuccess = true);
}

这将强制在 UI 上进行更新。

推荐阅读