How to get a string from an input using reactive form

Question

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 });
  }

xsh.7 · Accepted Answer · 2020-08-16 12:36:47Z

4

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;
});

edited Aug 16, 2020 at 12:36

answered Oct 9, 2018 at 6:25

xsh.7

6,2701 gold badge25 silver badges26 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Nacho Over a year ago

Well, it was just simple as that. Thank you so much sir!

Nacho Over a year ago

Sorry, i hurried up and now my lp-form-field-errors doesn't work because of .value. Seems like i get the value to my service but not on my formGroup from ngOnInit?

xsh.7 Over a year ago

Updated it. You should just access it when calling recoverLostPassword(), if otherwise email actually should be an AbstractFormControl.

Collectives™ on Stack Overflow

How to get a string from an input using reactive form

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related