I have a scenario where I need to navigate to different pages based on the radio button selection after clicking the "Recovery" button.
recovery.component.html
<div>
<div class="form-check">
<input value="true" name="group1" type="radio" id="radio1" >
<label for="radio1">Recover Username</label>
</div><br><br>
<div class="form-check">
<input value="false" name="group1" type="radio" id="radio2">
<label for="radio2">Recover Password</label><br><br><br><br>
<a id="link-cred" routerLink="/login" style="margin-right: 100px;" >Back to login</a>
</div>
<button mat-flat-button type="submit" (click)="choice()" >Recovery</button> <br><br>
</div>
recovery.component.ts
import { Component, OnInit } from '@angular/core';
import { Router, Route } from '@angular/router';
@Component({
selector: 'lpr-credential-recovery',
templateUrl: './credential-recovery.component.html',
styleUrls: ['./credential-recovery.component.scss']
})
export class CredentialRecoveryComponent implements OnInit {
isValid: boolean=true;
constructor(private router: Router,) { }
ngOnInit(): void {
}
choice(){
if(this.isValid){
this.router.navigate(['/recover_username']);
}else{
this.router.navigate(['/recover_password']);
}
}
}
Currently, only the "Recover Password" option is being navigated to upon clicking the radio buttons.