在角度提示上显示有效的电子邮件地址答案

【问题标题】：Show valid email address on the angular prompt在角度提示上显示有效的电子邮件地址
【发布时间】：2022-11-12 03:34:43
【问题描述】：

我创建了一个临时密码电子邮件，任何用户在点击忘记密码功能后都可以获得该电子邮件。获得临时通行证后，他们会看到一个提示，要求他们输入该临时通行证。我想在角度提示或弹出文本框中显示他们已使用或与他们拥有的帐户相关联的相同有效电子邮件地址。目前我已经创建了一个提示，我无法显示电子邮件，因为我以前没有使用过它。

我担心的是如何触发电子邮件地址，以便在弹出提示中可见？

以电子邮件地址为例：abcd@yahoo.com

我知道如何使用<一个>标记使用href=""后端共享超链接，但我不熟悉如何在角度提示上显示或触发任何电子邮件链接。

下面的代码是我为 .html 和 .ts 文件提供的代码。

临时组件.ts

tempPasswordTextLbl: "We have sent a temp pass to the abcd@yahoo.com email you provided. Please enter it below.",

临时.component.html

<p style="margin: 30px; text-align: justify; font-size:15px;">{{header.oneTimePasswordMessageLbl?header.oneTimePasswordMessageLbl:headerText.oneTimePasswordMessageLbl}}</p>

下面是提示的图像，电子邮件应如屏幕截图所示显示：

【问题讨论】：

标签： html typescript angular8

【解决方案1】：

据我了解，首先您需要检查电子邮件是否有效，然后才显示弹出窗口，通知代码已发送到先前通知的电子邮件。

为此，您需要使用 FormBuilder、FormGroup 和 Validators

html

<div class="jumbotron">
  <div class="container">
    <div class="row">
      <div class="col-md-6 offset-md-3">
        <h3>Angular Form Validation</h3>
        <form [formGroup]="myregisterForm" (ngSubmit)="onSubmit()">
          <div class="form-group">
            <label>Email: {{ myEmail }}</label>
            <input
              type="text"
              [(ngModel)]="myEmail"
              formControlName="email"
              class="form-control"
              [ngClass]="{ 'is-invalid': submitted && f.email.errors }"
            />
            <div *ngIf="submitted && f.email.errors" class="invalid-feedback">
              <div *ngIf="f.email.errors.required">Email is required</div>
              <div *ngIf="f.email.errors.email">
                Email must be a valid email address
              </div>
            </div>
          </div>

          <div class="form-group">
            <button class="btn btn-primary">Save</button>
          </div>
        </form>
      </div>
    </div>
  </div>
</div>

import { Component, OnInit } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app',
  templateUrl: 'app.component.html',
})
export class AppComponent implements OnInit {
  myregisterForm: FormGroup;
  submitted = false;
  myEmail = ''; // need to use text interpolation in html

  constructor(private formBuilder: FormBuilder) {}

  ngOnInit() {
    this.myregisterForm = this.formBuilder.group({
      email: [
        '',
        [
          Validators.required,
          Validators.email,
          Validators.pattern('^[a-z0-9._%+-]+@[a-z0-9.-]+\.[a-z]{2,4}$'),
        ],
      ],
    });
  }

  // convenience getter for easy access to form fields
  get f() {
    return this.myregisterForm.controls;
  }

  onSubmit() {
    this.submitted = true;

    // stop here if form is invalid
    if (this.myregisterForm.invalid) {
      return;
    }

    alert(
      'We have sent the temp pass to: ' + this.myEmail + ' email you provided'
    );
  }
}

请参阅Stackblitz 上的工作示例

【讨论】：