Тег ng-recaptcha <recaptcha>вызывает ошибку "zone.js: необработанный отказ от обещания" при изменении маршрута - PullRequest
Новая
       7

Тег ng-recaptcha <recaptcha>вызывает ошибку "zone.js: необработанный отказ от обещания" при изменении маршрута

0 голосов
/ 30 августа 2018

Я использую "ng-recaptcha" для углового компонента. Я использую внутри формы, как это: 

<form class="form-contact"
        [formGroup]="contactForm"
        #formDirective="ngForm" 
        (ngSubmit)="sendMessage(contactForm, formDirective)">
  <re-captcha class="recaptcha"
              formControlName="captcha"
              siteKey="mysitekey">
  </re-captcha>
</form>

Затем отправляю форму компоненту: 

export class AboutComponent implements OnInit, OnDestroy {
  contactForm: FormGroup;
  captchaResponse: string;
  private emailSubscription: Subscription;

  constructor(private emailService: EmailService) { }

  ngOnInit() {
    this.contactForm = new FormGroup({
      captcha: new FormControl('', Validators.required)
    });
  }
  
  ngOnDestroy(): void { 
    if (this.emailSubscription) { this.emailSubscription.unsubscribe(); } 
  }

  sendMessage(contactForm: FormGroup, formDirective: FormGroupDirective) {
    if (contactForm.valid) {
      this.emailSubscription = this.emailService.sendEmail(contactForm.value)
        .subscribe((response: ApiResponse) => {
          if (response.success) {
            console.log(response.message);
            formDirective.resetForm();
            contactForm.reset();
          } else {
            this.alertService.error(response.message);
          }
        }, (error: HttpErrorResponse) => {
          console.log({status: error.status, error: error.error});
          this.alertService.error('Error sending message. Please try again later or send a direct message.');
        }
      );
    }
  }
}

Кажется, все работает нормально. Однако при изменении маршрута (например, пользователь переходит на другую страницу) и AboutComponent отображается снова, появляется ошибка: Unhandled Promise rejection: timeout ; Zone: <root> ; Task: Promise.then ; Value: timeout undefined. Я на 99% уверен, что это вызвано тегом <re-captcha>, потому что ошибка не появляется после удаления тега. Есть ли способ сделать капчу без ошибок при изменении маршрута (и капча перезагружается после того, как я вернусь к компоненту)?

Ссылка на Stackblitz: stackblitz

1 Ответ

0 голосов
/ 04 ноября 2018

Это временное и довольно плохое исправление, но оно сработало для меня 

 // somewhere in your "main.ts" or "app.component.ts"
import { RecaptchaComponent } from 'ng-recaptcha';
RecaptchaComponent.prototype.ngOnDestroy = function() {
  if (this.subscription) {
    this.subscription.unsubscribe();
  }
}

Подробнее: https://github.com/DethAriel/ng-recaptcha/issues/123#issuecomment-426112101

...