从TypeScript获取表单input类型时复选框状态异常问题

TypeScript中定义表单字段如下：

myFormFields = [{
    label: 'Active',
    formControlName: 'active',
    value: false,
    type: 'checkbox'       
}]

在HTML中尝试动态渲染字段：

<div class="form-floating mb-3">
  <input type="{{field.type}}" formControlName="{{field.formControlName}}" />
  <label class="form-label">
     {{field.label}}
  </label> 
</div>

出现的问题：

• 动态绑定type="{{field.type}}"时，复选框始终无法根据value值选中；
• 直接写死type="checkbox"时，复选框能正常根据value（true选中、false未选中）切换状态。

对比DOM结构：

• 动态绑定type时，input标签多出value="true"属性（此时复选框未选中）：

<!-- checkbox is not checked -->
<input _ngcontent-ng-c3053247743="" type="checkbox" ng-reflect-name="active"
ng-reflect-ng-class="[object Object]" value="true" class="ng-untouched ng-pristine ng-valid">

• 写死type时，input标签无value属性（此时复选框已选中）：

<!-- checkbox is checked -->
<input _ngcontent-ng-c2417600516="" type="checkbox" ng-reflect-name="active"
ng-reflect-ng-class="[object Object]" class="ng-untouched ng-pristine ng-valid">

这是Angular处理插值表达式绑定type时的渲染逻辑问题：

1. 初始渲染阶段，Angular会先把input当成普通文本输入框处理，自动给它添加默认的value属性（值为true是表单控件初始值的默认转换结果）；
2. 当插值表达式将type更新为checkbox后，之前生成的value属性不会被自动移除；
3. 复选框的选中状态原本由checked属性（或FormControl的布尔值）控制，但额外存在的value="true"会干扰Angular的表单绑定逻辑——复选框默认的value是"on"，手动设置的value会让FormControl的布尔值与复选框状态的映射关系混乱，导致无法正常同步选中状态。

方法1：使用Angular属性绑定语法（推荐） #

把type="{{field.type}}"改为属性绑定[type]="field.type"，这是Angular官方推荐的绑定方式，能正确识别输入类型并处理对应的表单逻辑，不会生成多余的value属性：

<div class="form-floating mb-3">
  <input [type]="field.type" formControlName="{{field.formControlName}}" />
  <label class="form-label">
     {{field.label}}
  </label> 
</div>

方法2：手动同步复选框状态（备选方案） #

如果因特殊场景必须使用插值绑定，可手动给复选框添加checked属性绑定，确保状态与value同步：

<div class="form-floating mb-3">
  <input type="{{field.type}}" formControlName="{{field.formControlName}}" [checked]="field.value" />
  <label class="form-label">
     {{field.label}}
  </label> 
</div>

注意：需确保FormControl的初始值与field.value完全一致，避免状态冲突。

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