Choice with radio button

November 24, 2022

I have two radio buttons to click, after clicking on the "Recovery" button I should move to one page or another based on where I click on the radio button.

recovery.component.html

<div>
        <div class="form-check">
          <input  value="true" name="gruppo1" type="radio" id="radio1" >
          <label for="radio1">Recupera username</label> 
        </div><br><br>
        <div class="form-check"> 
          <input  value="false" name="gruppo1" type="radio" id="radio2">
          <label for="radio2">Recupera password</label><br><br><br><br>
          <a id="link-cred" routerLink="/login" style="margin-right: 100px;" >Torna al 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(['/recupera_username']);
    }else()=>{
      this.router.navigate(['/recupera_password']);
    }
    


   }
 
}

At this moment, clicking on the radio buttons I only go to "recover password".

>Solution :

I have used ngModel to get the values of radio buttons and now after clicking on the "Recovery" button you should move to one page or another based on where you click on the radio button.

import { Component, OnInit } from '@angular/core';
import { Router } from '@angular/router';

@Component({
  selector: 'app-upload-active-census',
  templateUrl: './upload-active-census.component.html',
  styleUrls: ['./upload-active-census.component.css'],
})
export class UploadActiveCensusComponent implements OnInit {
  
  RecoverValue;

  constructor(private router: Router) {}

  ngOnInit(): void {}

  choice() {
    if (this.RecoverValue == 'true') {
      this.router.navigate(['/recupera_username']);
    } else if (this.RecoverValue == 'false') {
      this.router.navigate(['/recupera_password']);
    }
  }
}

<div>
    <div class="form-check">
        <input value="true" name="gruppo1" type="radio" id="radio1" [(ngModel)]="RecoverValue">
        <label for="radio1">Recupera username</label>
    </div><br><br>
    <div class="form-check">
        <input value="false" name="gruppo1" type="radio" id="radio2" [(ngModel)]="RecoverValue">
        <label for="radio2">Recupera password</label><br><br><br><br>
        <a id="link-cred" routerLink="/login" style="margin-right: 100px;">Torna al login</a>
    </div>
    <button mat-flat-button type="submit" (click)="choice()">Recovery</button> <br><br>
</div>