Angular单选按钮绑定异常：点击Recovery按钮仅跳转至密码找回页

问题根源 #

1. 单选按钮未与组件的isValid属性双向绑定，用户切换选项时无法同步更新组件内的变量值
2. TypeScript代码中else语法错误，错误使用箭头函数写法，导致跳转逻辑执行异常

修复步骤 #

1. 修正TypeScript语法错误

将choice方法里的错误语法改成正常代码块：

choice(){
    if(this.isValid){
      this.router.navigate(['/recupera_username']);
    } else {
      this.router.navigate(['/recupera_password']);
    }
}

2. 给单选按钮添加双向绑定

修改HTML中的单选按钮，通过[(ngModel)]绑定到组件的isValid属性，实现选中状态与变量值同步：

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

3. 导入FormsModule（必要步骤）

Angular的双向绑定依赖FormsModule，需在当前组件所属的模块（如AppModule或对应功能模块）中导入并声明：

import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // ...其他已导入模块
    FormsModule
  ]
})
export class YourModuleName { }

原理说明 #

• 双向绑定[(ngModel)]会将单选按钮的选中状态同步到isValid变量：选中第一个单选框时isValid为true，选中第二个时为false
• 修正后的choice方法会根据isValid的正确值执行对应的页面跳转逻辑
• 导入FormsModule是双向绑定生效的必要前提，否则Angular无法识别ngModel指令

内容的提问来源于stack exchange，提问作者Belbo