Рекапча Angular - PullRequest
Новая
       11

Рекапча Angular

0 голосов
/ 29 марта 2020

каждый

Я интегрирую в свой модуль рекапчи веб-приложения Angular. Это прекрасно работает, когда я обновляю sh мою страницу регистрации, у меня нет ошибки. Когда я обновляю sh свою страницу регистрации, и после того, как я изменяю маршрут на / Login, а другой я меняю свой маршрут на / Register, у меня появляется эта ошибка. Может кто-нибудь помочь мне, пожалуйста !!

Ошибка

enter image description here

Auth-модуль: 

import {
  RecaptchaModule,
  RecaptchaFormsModule,
  RECAPTCHA_LANGUAGE
} from "ng-recaptcha";

@NgModule({
  declarations: [
     ...
  ],
  exports: [],
  imports: [
    ... ,
    RecaptchaModule,
    RecaptchaFormsModule
  ],
  providers: [
    {
      provide: RECAPTCHA_LANGUAGE,
      useValue: "fr"
    }
  ]

register.component.ts 

  public registerForm: FormGroup;
  public getEmail: AbstractControl;
  public getPassword: AbstractControl;
  public getReCaptcha: AbstractControl;

  public user: SocialUser;
  public loggedIn: boolean;

  constructor(
    private _authUserService: AuthUserService,
    private _authGoogleFacebookService: AuthService,
    private _userValidationService: UserValidationService,
  ) {}

  ngOnInit() {
    this.getInfoSocialUser();
    this.registerForm = this._userValidationService.authForm;
    this.registerForm.reset();
    this.getEmail = this._userValidationService.getEmail;
    this.getPassword = this._userValidationService.getPassword;
    this.getReCaptcha = this._userValidationService.getReCaptcha;
  }

  resolved(captchaRes: string) {
    this.registerForm.controls["recaptcha"].setValue(captchaRes);
  }

register.component. html

<form [formGroup]="registerForm" (ngSubmit)="doRegisterUser()">
  <div>
    <input
      type="text"
      placeholder="Email"
      [class.is-invalid]="getEmail.invalid && getEmail.touched"
      formControlName="email"
    />
  </div>

  <div>
    <input
      type="password"
      placeholder="password"
      [class.is-invalid]="getPassword.invalid && getPassword.touched"
      formControlName="password"
    />
  </div>

  <div>
    <input
      type="password"
      placeholder="Confirm Password"
      [class.is-invalid]="registerForm.errors?.misMatch"
      formControlName="confirmPassword"
    />
  </div>

  <re-captcha
    class="recaptcha"
    formControlName="recaptcha"
    (resolved)="resolved($event)"
    siteKey="SECRET_KEY"
  ></re-captcha>

user-valdiation.service.ts 

 public authForm: FormGroup;

  constructor(private _fb: FormBuilder) {
    this.formAuth();
  }

  private formAuth(): FormGroup {
    return (this.authForm = this._fb.group(
      {
        email: [
          null,
          [
            Validators.required,
            Validators.minLength(11),
            Validators.maxLength(50),
            forbiddenNameValidatorEmail
          ]
        ],
        password: [
          null,
          [
            Validators.required,
            Validators.minLength(4),
            Validators.maxLength(100),
            forbiddenNameValidatorPassword(/password/)
          ]
        ],
        confirmPassword: [null],
        recaptcha: ["", [Validators.required]]
      },
      { validator: PasswordValdiator }
    ));
  }

  /** GET KEY FROM AUTH VALUE */
  get getEmail(): AbstractControl {
    return this.authForm.get("email");
  }
  get getPassword(): AbstractControl {
    return this.authForm.get("password");
  }
  get getReCaptcha(): AbstractControl {
    return this.authForm.get("recaptcha");
  }
...