Angular HTML中属性带[]与不带的区别：响应式表单单选绑定原理解析

旧写法的运行逻辑与失效原因 #

最初的代码实现：

<mat-radio-button  value="true" id="1" [checked]="true" />
<mat-radio-button  value="false" id="2"  />

这段代码存在两个层面的逻辑冲突，直接导致二次加载时默认选中失效：

1. 值类型不匹配隐患
   不带方括号的value="true"是静态字符串绑定，传递给MatRadioButton的是字符串类型的"true"。如果TypeScript逻辑中patch的默认值是布尔类型的true，JS严格相等判断中"true" === true结果为false，MatRadioGroup的匹配逻辑本来就无法定位到对应选中项。
2. 选中态的状态竞争
   MatRadioGroup本身有一套独立的选中态计算规则：每次表单值变更、变更检测周期触发时，会遍历组内所有MatRadioButton，对比每个按钮的value与组绑定的表单值，仅当两者严格相等时，才会把对应按钮的checked属性置为true，其余按钮自动置为未选中。
   而给第一个按钮绑定的[checked]="true"是独立的硬编码输入值，每次Angular执行变更检测时，都会强制把这个按钮的选中态覆盖为true，完全绕开MatRadioGroup的统一管控。第一次加载时，因为硬绑定的选中态和组的初始计算结果刚好视觉一致，问题不会暴露；等到二次加载表单、重新触发patchValue流程时，组的匹配逻辑和硬绑定的checked值会因为执行时序错位产生竞争：要么组算出来的选中态被硬绑定强制覆盖，要么因为值类型不匹配找不到目标选中项，最终出现默认选中无法正常显示的问题。

调整后写法的运行逻辑 #

修改后的代码实现：

<mat-radio-button  [value]="true" id="1" />
<mat-radio-button  [value]="false" id="2" />

这套写法完全贴合Angular响应式表单的设计规则：

• [value]="true"是动态输入绑定，传递给MatRadioButton的是布尔类型的true，和TypeScript中存储的表单值类型完全一致，MatRadioGroup的匹配逻辑可以通过严格相等判断准确定位到对应选项。
• 没有给单个MatRadioButton绑定独立的checked属性，所有选中态的计算、更新完全由MatRadioGroup基于FormControl的当前值统一管控，整个状态流转遵循单向数据流规则，不存在外部硬绑定对内部状态的篡改，不管多少次触发patchValue、重新渲染表单，选中态的计算逻辑都是单一可靠的，自然就符合预期。

两种写法的核心差异总结 #

• 值传递层面：静态value="xxx"固定传递字符串，动态[value]="xxx"按JS变量类型传递，从根源上避免了和表单值的类型不匹配问题
• 状态管控层面：硬绑[checked]会让单个组件的选中态脱离单选组的统一管控，产生状态竞争；取消独立checked绑定后，所有状态完全回归FormControl的集中管理，符合响应式表单的设计初衷
• 渲染稳定性层面：存在状态竞争的写法在二次加载、变更检测时序波动时容易出现选中态错乱；完全遵循单向数据流的写法可以保证任意渲染场景下的状态一致性

补充提示：开发Material单选组时，不要照搬原生input radio的硬绑checked的实现思路，所有选中态的控制完全由FormControl的value决定即可，不需要在单个radio上手动设置checked属性。

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