Angular中如何通过单选按钮切换显示对应输入文本框？

嘿，我来帮你搞定这个问题！其实用*ngIf和ngModel完全能实现，大概率是你之前的绑定或者条件判断没处理对。我给你一套完整的实现方案，你照着改改应该就能解决了。

第一步：组件类中定义跟踪变量 #

首先在你的组件.ts文件里，定义一个变量来记录当前选中的单选按钮值：

import { Component } from '@angular/core';

@Component({
  selector: 'app-your-component',
  templateUrl: './your-component.component.html',
  styleUrls: ['./your-component.component.css']
})
export class YourComponentComponent {
  // 定义变量跟踪选中的选项，初始可以设为空或者默认选项
  selectedOption: string = '';
}

第二步：模板中绑定单选按钮和条件显示输入框 #

然后在对应的模板.html文件里，这样写：

<!-- 单选按钮组 -->
<div>
  <label>
    <input type="radio" name="optionGroup" [(ngModel)]="selectedOption" value="email">
    邮箱
  </label>
  <label>
    <input type="radio" name="optionGroup" [(ngModel)]="selectedOption" value="phone">
    手机号
  </label>
</div>

<!-- 对应输入框 -->
<div *ngIf="selectedOption === 'email'">
  <label>邮箱地址：</label>
  <input type="email" placeholder="请输入邮箱">
</div>

<div *ngIf="selectedOption === 'phone'">
  <label>手机号：</label>
  <input type="tel" placeholder="请输入手机号">
</div>

关键注意点 #

• 所有单选按钮必须设置相同的name属性，这样它们才能成为互斥的一组，选中一个就会自动取消另一个的选中状态。
• [(ngModel)]要绑定到同一个组件变量（这里是selectedOption），这样才能实时同步选中的值到组件中。
• *ngIf的判断条件要和单选按钮的value完全匹配，比如单选按钮的value是"email"，判断就用selectedOption === 'email'，大小写和字符串内容都得一致。

如果之前你没成功，可能是没给单选按钮设置相同的name，或者ngModel绑定的变量不对，再检查一下这几点应该就没问题啦。

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