带单选按钮的选择答案

【问题标题】：Choice with radio button带单选按钮的选择
【发布时间】：2022-11-24 20:13:13
【问题描述】：

我有两个单选按钮可以单击，单击“恢复”按钮后，我应该根据单击单选按钮的位置移动到一页或另一页。

恢复.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>

恢复.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']);
    }
    


   }
 
}

此时，单击单选按钮我只会转到“恢复密码”。

【问题讨论】：

请包括相关路线文件
这可能是因为您没有在单击单选按钮时更改标志 isValid 的值，它始终为 false，因此只执行其他情况。

标签： angular typescript frontend

【解决方案1】：

我已经使用 ngModel 获取单选按钮的值，现在在单击“恢复”按钮后，您应该根据单击单选按钮的位置移动到一页或另一页。

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>

【讨论】：