Show valid email address on the angular prompt - html

Question

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: abcd#yahoo.com
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 abcd#yahoo.com 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:

Answer 1

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 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>
ts
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