Vyhledávání na webu

angular - Jak získat řetězec z vstupu pomocí reaktivního formuláře

No, snažím se získat vstup (email) pomocí getteru ve svém component.ts a getter vrací AbstractControl, což je v pořádku. Takže když používám 'email' ve své metodě, potřebuji řetězec, který mohu použít ve své službě. Zkoušel jsem změnit typ email ve své službě na typ AbstractControl a dostal jsem 'Converting circular structure to JSON' (nefunguje to). Zkoušel jsem přetypovat email na string, ale ani to nefungovalo. Zkoušel jsem použít [(ngModel)]="email" místo formControlName="email" (v mém component.html) a deklarovat email: string ve svém component.ts.

Takže můj problém je v tom, že potřebuji způsob, jak předat řetězec z mé šablony do mé metody, abych ho mohl použít ve své službě a získat uživatelský vstup (e-mail).

forgot-password.component.html

<section>
  <header>
    Por favor indíquenos cuál es la dirección de email asociada a su cuenta de Rudder.
  </header>
  <div class="form" [formGroup]="form">
    <input formControlName="email" type="email" pInputText placeholder="Email">
    <lp-form-field-errors [serverErrors]="serverErrors" bindToErrorsKey="email" [control]="email"></lp-form-field-errors>
    <button pButton label="Recuperar contraseña" [disabled]="processStarted" (click)="recoverLostPassword()"></button>
    <div>
      Volver al <a [routerLink]="['login']">inicio de sesión</a>
    </div>
  </div>
  <div *ngIf="processStarted">
    <p>
      El proceso de recuperación de contraseña fue iniciado con éxito.
    </p>
    <p>
      Le hemos enviado un correo con las instrucciones para poder reestablecer la clave de su cuenta, por favor
      revise su casilla.
    </p>
  </div>

</section>

forgot-password.component.ts

import { Component, OnInit } from '@angular/core';
import {LoginService} from '../../services/login.service';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-forgot-password',
  templateUrl: './forgot-password.component.html',
  styleUrls: ['./forgot-password.component.less']
})
export class ForgotPasswordComponent implements OnInit {

  processStarted: boolean;
  form: FormGroup;

  constructor(private loginService: LoginService, private fb: FormBuilder) { }

  ngOnInit() {
    this.form = this.fb.group({
      email: ['', [Validators.required, Validators.email]]
    });
  }

  recoverLostPassword() {
    this.loginService.recoverLostPassword(this.email).subscribe(() => {
      this.processStarted = true;
    });
  }

  get email() { return this.form.get('email'); }

}

login.service.ts

Metoda :

recoverLostPassword(email: string): Observable<any> {
    return this.http.post('/test/test/recover-lost-password', { email: email });
  }

Odpověď č. 1

Jak jste uvedli, this.form.get('email') je FormControl (nebo AbstractControl). Pro přístup k jeho hodnotě můžete zkontrolovat přístup AbstractControl#value:

this.loginService.recoverLostPassword(this.email.value).subscribe(() => {
  this.processStarted = true;
});

nebo použitím Form#value:

this.loginService.recoverLostPassword(this.form.value.email).subscribe(() => {
  this.processStarted = true;
});

Související články