Блог

Я хотел бы взять данные, которые они вводят в моей форме сброса пароля, в которой есть только одно поле, которое является mail, и это mail, который вы вводите пользователю, вызываете его в другом компоненте и, если возможно, скрываете звездочками

Я пробовал с фрагментами кода, но я не очень хорошо понимаю, как это сделать с помощью ввода, вывода и eventmitter в angular.

Я делюсь с вами кодом, который у меня есть, и изображением того, чего я стремлюсь достичь

 <div class="container-fluid forgot-container">
    <div class="row">
        <div class="col-md-12  text-center">

            <div class="logo">
                LOGO
            </div>
            <p class="subtitle">
                Ingresa el correo electrónico registrado en la<br/> plataforma para recuperar tu contraseña.
            </p>
            <form [formGroup]="form">
                <mat-form-field class="inputForm">
                    <input autocomplete="off" matInput placeholder="Correo electrónico" type="email" formControlName="email">
                </mat-form-field>
                    <mat-error *ngIf="!email.valid">
                        {{getEmailError()}}
                    </mat-error>
                <button (click)="goToInstructions();" class="btn-recovery" [disabled]="!form.valid" mat-flat-button >RECUPERAR CONTRASEÑA</button>
            </form>
                <button (click)="goToLogin()" class="btn-back" mat-flat-button >VOLVER</button>

        </div>
    </div>
</div>
  

Забыли пароль ts

 import { Component, OnInit, Input, Output, EventEmitter } from '@angular/core';
import {FormControl, FormGroup, Validators} from '@angular/forms';
import { Router } from '@angular/router';

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

  constructor(private router: Router) { }

  ngOnInit(): void {
  }

  goToLogin(){
    this.router.navigate(['/log-in'])
  }

  goToInstructions(){
    this.router.navigate(['/password-instruction'])
  }

  form: FormGroup = new FormGroup({
    email: new FormControl('', [ Validators.email, Validators.required ])
  });

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

  getEmailError() {
    if (this.email.hasError('email')) {
      return 'Ingrese un correo electronico valido.';
    }
    if (this.email.hasError('required')) {
      return 'Un correo es requerido.';
    }
  }  

}
  

Пример изображения

Итак, если я правильно вас понимаю, вы хотите получить значение из электронной почты пользователя, чтобы вы могли передать это значение в другую часть формы в сообщении?

Находится ли на 2 отдельных экземплярах страницы (как показано на рисунке)? или вы заполняете email -> перейти к следующему разделу (компоненту) с сообщением электронной почты в тексте?

Если все это находится на той же странице, что и изображение, создайте событие двусторонней привязки данных. Сохраните значение, и когда электронное письмо будет отправлено, сохраненное значение появится там, где когда-либо у вас было привязано к нему.

 <form (submit)="onSubmit()">
   <input [(ngModel)]="capturedEmail">
</form>

let capturedEmail: string;
onSubmit() {
  return this.capturedEmail
  

Если это 2 отдельных события (что означает открытие компонентов)?

Существует несколько способов, которыми вы можете это сделать, все они включают хранение эфира данных в локальном хранилище или 2-х сторонние маршруты привязки данных, декораторы свойств, такие как viewshed (родительский и дочерний)

• пользователь заполняет форму электронной почты
• следующий компонент открывается с сообщением электронной почты, переданным в виде текста

Вы могли бы просто использовать обычный старый JavaScript, если вы не хотите хранить данные, и это для визуального эффекта?

Создайте компонент контейнера, который действует как контейнер для двух компонентов:

1. Компонент, содержащий форму, в которой вы вводите идентификатор электронной почты.
2. Компонент, содержащий сообщение, показывающее, что пароль был отправлен по электронной почте на *** email.

В компоненте контейнера должна быть переменная «display». Если значение display равно true, отобразите компонент 1 и скройте компонент 2. Если значение равно false, скройте компонент 1 и отобразите компонент 2. В компоненте 2 должен быть входной параметр, через который переменная «emailid», принадлежащая контейнерному компоненту, будет передаваться из контейнерного компонента в компонент 2.

Теперь, как только пользователь вводит идентификатор электронной почты и форма отправляется, генерирует событие вывода, содержащее идентификатор электронной почты в качестве передаваемого значения. Вызов события emit запускает функцию «toggleDisplay» компонента контейнера с emailid в качестве параметра, который переключает значение отображения, а также присваивает значение «emailId». Теперь, поскольку это значение emailId было передано в качестве входных данных компоненту 2, оно будет доступно компоненту 2 и может отображаться.