Question

我想获取他们在我的密码重置表单中输入的数据，该表单只有一个字段，即邮件，而您输入的邮件是用户，请在另一个组件中调用它，并在可能的情况下用星号隐藏

我已经尝试过使用代码片段，但是我不太了解如何使用角度的输入，输出和事件发送器来完成它。

我与您分享我拥有的代码以及我寻求实现的图像

<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.';
    }
  }  

}

Example image

Answer 1

创建一个容器组件，充当两个组件的容器：

包含用于在其中输入电子邮件ID的表单的组件。
包含显示密码的消息的组件已通过电子邮件发送给***电子邮件。

容器组件中应该有一个“显示”变量。如果display的值为true，则显示组件1并隐藏组件2。如果值为false，则隐藏组件1和显示组件2。组件2中必须有一个输入参数，通过该输入参数，属于该变量的“ emailid”容器组件将从容器组件传递到组件2。

现在，一旦用户键入电子邮件ID并提交表单，就会发出包含电子邮件ID作为发射值的输出事件。发出事件调用以emailid作为参数触发容器组件的“ toggleDisplay”功能，该功能可切换显示值并将该值分配给“ emailId”。现在，由于此emailId值已作为输入传递到组件2，因此它将对组件2可用并可以显示。

Answer 2

因此，如果我理解正确，那么您想从用户电子邮件中收集值，以便可以将该值传递给消息中的表单的另一部分？

是否在页面的2个单独实例上（如图片所示）？还是填写电子邮件->转到下一部分（组件），文本中包含电子邮件？

如果图像都在同一页上，则创建一个2向数据绑定事件。存储该值，当通过电子邮件发送电子邮件时，存储的值将显示在绑定了该值的任何位置。

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

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

如果这是2个单独的事件（意味着组件正在打开）？

您可以通过多种方法来完成所有这些工作，其中包括将数据以太存储在本地存储中或以两种方式进行数据绑定路线，诸如视域（父级和子级）之类的属性装饰器

用户填写电子邮件表格
下一个组件打开，并以文本形式传递电子邮件

如果您不想存储数据并且只是为了视觉效果，也可以只使用普通的旧JavaScript？

将数据从组件传递到组件

2 个答案: