Angular单选按钮切换显示表单元素问题求助

问题根源 #

你的代码存在两个核心问题：

• 单选按钮的value是字符串类型的"true"/"false"，但布尔判断中字符串"false"会被视为true，导致[class.d-none]始终生效
• 同时使用formControlName和ngModel属于混合表单模式，Angular不推荐且容易引发状态不一致

修复方案 #

1. 移除ngModel绑定：既然使用响应式表单，直接通过formControl的状态来控制显示逻辑
2. 将单选按钮的value改为布尔值：用[value]="true"和[value]="false"替代字符串值
3. 修正显示判断逻辑：通过表单控件的value来控制d-none类的添加

修改后的代码 #

<mat-radio-group aria-label="Select an option" formControlName="fullypaid">
  <mat-radio-button [value]="true" [checked]="true">Fully Paid</mat-radio-button>
  <mat-radio-button [value]="false">Partially Paid</mat-radio-button>
</mat-radio-group>
<p>{{ form.get('fullypaid')?.value }}</p>
<div class="formGroup" [class.d-none]="form.get('fullypaid')?.value">
  <label for="paidamount" class="form-label" style="margin-top: 10pt;">Paid Amount</label>
  <input type="text" class="form-control form-control1" id="paidamount" formControlName="paidamount"
    placeholder="paidamount" name="paidamount" style="margin-left: 20pt;">
</div>

额外说明 #

• 确保你的组件类中已经正确初始化了表单控件：

import { FormGroup, FormControl } from '@angular/forms';

// ...

form = new FormGroup({
  fullypaid: new FormControl(true),
  paidamount: new FormControl('')
});

• 如果需要更简洁的模板语法，可以给表单控件起别名：

<mat-radio-group aria-label="Select an option" [formControl]="fullypaidCtrl">
  <!-- ... -->
</mat-radio-group>
<div class="formGroup" [class.d-none]="fullypaidCtrl.value">
  <!-- ... -->
</div>

组件类中对应添加：

fullypaidCtrl = new FormControl(true);
paidamountCtrl = new FormControl('');
form = new FormGroup({
  fullypaid: this.fullypaidCtrl,
  paidamount: this.paidamountCtrl
});

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