I have recently started using the Angular2 Framework, so please bear with me if I make any common mistakes. I have set up two forms in separate div tags: one for logging in and another for password reset. Below the login form, there is a link that, when clicked, hides the login form and displays the password reset form.
Similarly, under the password reset form, there is a link that, when clicked on, hides the password reset form and shows the login form.
The default visibility is set to the login form. Here is the HTML code:
<div class="login-block" *ngIf="!showResetPassword">
<form [formGroup]="loginForm" (ngSubmit)="onSubmit(loginForm)">
<h1>Login</h1>
<div>
<label for="username"></label>
<input type="text" placeholder="username" id="username" formControlName="username" />
</div>
<div>
<label for="password"></label>
<input type="password" placeholder="password" id="password" formControlName="password" />
</div>
<div>
<button type="submit">Log In</button>
</div>
</form>
<div>
<a href="#" (click)="onTogglePasswordReset($event)">Reset Password?</a>
</div>
</div>
<div class="login-block" *ngIf="showResetPassword">
<form [formGroup]="resetForm" (ngSubmit)="onSubmit(resetForm)">
<h1>Reset password</h1>
<div>
<label for="resetusername"></label>
<input type="text" placeholder="username" id="resetusername" formControlName="resetusername" />
</div>
<div>
<button type="submit">Continue</button>
</div>
</form>
<div>
<a href="#" (click)="onTogglePasswordReset($event)">Account Access</a>
</div>
</div>
And here is my TypeScript function:
onTogglePasswordReset(e: Event) {
e.preventDefault();
this.showResetPassword = !this.showResetPassword;
alert(this.showResetPassword);
}
My issue arises when I click on the 'Reset Password' link for the first time. The reset form shows correctly, but clicking on 'Account Access' does not display the login form again. It works once and then stops.
A strange observation is that when I initially display the Password Reset form and then click on 'Account Access,' it does show the login form. However, if I then proceed to click on the 'Reset Password' link, everything works fine, but clicking on 'Account Access' again does not bring back the login form. It works twice and then stops working altogether.