CODEWITHSUNDEEP
angulartypescriptangular-reactive-forms
Nacho
Nacho

Reputation: 301

How to get a string from an input using reactive form

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 string but it didn't work either. I tried using [(ngModel)]="email" instead of formControlName="email" (on my component.html) and declaring email: string on my component.ts.

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).

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

Method:

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

Upvotes: 3

Views: 9140

Answers (1)

xsh.7
xsh.7

Reputation: 6250

As you stated, this.form.get('email') is a FormControl (or AbstractControl). To access its value, you can check access AbstractControl#value:

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

or using Form#value:

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

Upvotes: 4

Related Questions