Choice with radio button-CodePudding

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 >
          <input  value="true" name="gruppo1" type="radio" id="radio1" >
          <label for="radio1">Recupera username</label> 
        </div><br><br>
        <div > 
          <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".

CodePudding user response：

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 >
        <input value="true" name="gruppo1" type="radio" id="radio1" [(ngModel)]="RecoverValue">
        <label for="radio1">Recupera username</label>
    </div><br><br>
    <div >
        <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>