Question

好吧，我正在尝试使用我的component.ts上的getter来获取输入（电子邮件）。 getter返回AbstractControl，没关系。因此，当我在方法上使用“电子邮件”时，我需要在服务上使用字符串。我尝试将服务上的电子邮件类型更改为类型：AbstractControl，并且得到“将循环结构转换为JSON”（不起作用）。我尝试将电子邮件投射为string，但也没有用。我尝试使用[(ngModel)]="email"代替formControlName =“ email”（在我的component.html上），并在我的component.ts上声明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

方法：

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

Answer 1

如您所述，this.form.get('email')是FormControl（或AbstractFormControl）。要访问其值，您可以检查访问权限AbstractFormControl#value：

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

或使用Form#value：

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

如何使用反应形式从输入中获取字符串

1 个答案: