title: How to get a string from an input using reactive form
body: <p>Well, I'm trying to get the input (email) using a getter on my component.ts and
  the getter returns an AbstractControl and that's ok. So when I use the 'email' on my method I need a string to use on my service. I tried to change the type of email on my service to type: AbstractControl and I get 'Converting circular structure to JSON' (It doesn't work). I tried to cast email as a <code>string</code> but it didn't work either. I tried using <code>[(ngModel)]="email"</code> instead of formControlName="email" (on my component.html) and declaring email: string on my component.ts.</p>
  
  <p>So, my problem is that I need a way to pass the string from my template on my method to use it in my service and get the user's input (email).</p>
  
  <p><strong>forgot-password.component.html</strong></p>
  
  <pre><code>&lt;section&gt;
    &lt;header&gt;
      Por favor indíquenos cuál es la dirección de email asociada a su cuenta de Rudder.
    &lt;/header&gt;
    &lt;div class="form" [formGroup]="form"&gt;
      &lt;input formControlName="email" type="email" pInputText placeholder="Email"&gt;
      &lt;lp-form-field-errors [serverErrors]="serverErrors" bindToErrorsKey="email" [control]="email"&gt;&lt;/lp-form-field-errors&gt;
      &lt;button pButton label="Recuperar contraseña" [disabled]="processStarted" (click)="recoverLostPassword()"&gt;&lt;/button&gt;
      &lt;div&gt;
        Volver al &lt;a [routerLink]="['login']"&gt;inicio de sesión&lt;/a&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div *ngIf="processStarted"&gt;
      &lt;p&gt;
        El proceso de recuperación de contraseña fue iniciado con éxito.
      &lt;/p&gt;
      &lt;p&gt;
        Le hemos enviado un correo con las instrucciones para poder reestablecer la clave de su cuenta, por favor
        revise su casilla.
      &lt;/p&gt;
    &lt;/div&gt;
  
  &lt;/section&gt;
  </code></pre>
  
  <p><strong>forgot-password.component.ts</strong></p>
  
  <pre><code>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(() =&gt; {
        this.processStarted = true;
      });
    }
  
    get email() { return this.form.get('email'); }
  
  }
  </code></pre>
  
  <blockquote>
    <p>login.service.ts</p>
  </blockquote>
  
  <p>Method:</p>
  
  <pre><code>recoverLostPassword(email: string): Observable&lt;any&gt; {
      return this.http.post('/test/test/recover-lost-password', { email: email });
    }
  </code></pre>