Show valid email address on the angular prompt-CodePudding

I have created a temporary password email which any user can get once they click on the forgot password feature. After getting the temp pass they will see a prompt asking them to enter that temp pass. I want to show the same valid email address they have used or associated with the account they have on the angular prompt or pop-up text box. Currently I have created a prompt where I am not able to show the email, since I have not used it before.

My concern is how can I trigger the email address so that it will be visible on that pop-up prompt?

email address as an example: [email protected]

I know how to use the <a> tag using href="" for the backend to share hyperlinks, but I'm not familiar how to show or how to trigger any email link on an angular prompt.

Below codes are what I have for the .html and the .ts files.

temporary.component.ts

tempPasswordTextLbl: "We have sent a temp pass to the [email protected] email you provided. Please enter it below.",

temporary.component.html

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

Below is the image of the prompt and the email should show up as shown in the screenshot:

CodePudding user response：

As I understood it, first you need to check if the email is valid and only then show the popup informing that the code was sent to the email previously informed.

For this you need to use FormBuilder, FormGroup and Validators

html

<div >
  <div >
    <div >
      <div >
        <h3>Angular Form Validation</h3>
        <form [formGroup]="myregisterForm" (ngSubmit)="onSubmit()">
          <div >
            <label>Email: {{ myEmail }}</label>
            <input
              type="text"
              [(ngModel)]="myEmail"
              formControlName="email"
              
              [ngClass]="{ 'is-invalid': submitted && f.email.errors }"
            />
            <div *ngIf="submitted && f.email.errors" >
              <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 >
            <button >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'
    );
  }
}

See working example on Stackblitz