TypeScript如何为单选按钮组根据数据库返回值设置选中状态

第一步：修改HTML单选框代码，绑定响应式表单属性 #

首先给单选框加上formControlName属性，和表单组内的控件做绑定。如果filter.data2是数字类型，需要把单选的value改成Angular属性绑定[value]，避免字符串和数字类型不匹配导致选中失败：

<input type="text" id="title" class="form-control" formControlName="title" maxlength="50"/>
<div class="form-control radio">
  <input type="radio" class="m-r-5" [value]="2" name="rgLongTerm" formControlName="longTerm"> <label> all </label>
  <input type="radio" class="m-r-5" [value]="0" name="rgLongTerm" formControlName="longTerm"> <label> no </label>
  <input type="radio" class="m-r-5" [value]="1" name="rgLongTerm" formControlName="longTerm"> <label> yes </label>
</div>

如果你的filter.data2是字符串类型的"0"、"1"、"2"，不需要改[value]，直接保留原来的value="2"写法即可。

第二步：在FormGroup定义中新增对应表单控件 #

在你初始化表单的FormGroup配置里，新增和上面formControlName同名的longTerm控件：

// 示例表单初始化代码
this.form = this.fb.group({
  title: [''], // 原有文本框控件
  longTerm: [null] // 新增单选框对应的控件
})

第三步：调用patchValue完成赋值 #

赋值逻辑和文本框完全一致，直接给longTerm控件赋值filter.data2，框架会自动选中对应值的单选框：

// 原有文本框赋值逻辑
form.controls.title.patchValue(filter.data);
// 新增单选框赋值逻辑
form.controls.longTerm.patchValue(filter.data2);

补充说明：只要保证赋值的filter.data2类型和单选框value的类型一致，就能正常触发选中效果，不需要额外写DOM操作代码。

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