Angular 表单中下拉框默认值失效的原因及解决方案

在 angular 模板驱动表单中，若多个 `` 元素共用相同的 `name` 属性值，angular 会将它们视为同一表单控件，导致后渲染的下拉框覆盖前者的绑定值，从而出现仅最后一个下拉框显示默认选中、其余重置为空的问题。

这个问题的根本原因在于 Angular 表单对 name 属性的严格依赖机制。在模板驱动表单（ngForm）中，每个表单控件（如 、、）必须拥有<strong>唯一且稳定的 name</strong>，Angular 才能正确建立 ngModel 与控件之间的双向绑定关系，并独立跟踪每个控件的状态。

在你的代码中：

<select
  class="form-select"
  [(ngModel)]="currentChannel.selectedValue"
  name="ddd"  <!-- ❌ 所有 select 都使用相同 name -->
>

尽管 [(ngModel)] 绑定的是不同对象属性（members[0].selectedValue、members[1].selectedValue），但 Angular 表单系统优先依据 name 进行控件注册。当多个 共享 name="ddd" 时，Angular 会反复用最新渲染的控件覆盖前一个同名控件的模型引用 —— 最终只有最后一个 能真正“持有” ngModel 的有效绑定，其余控件的视图状态无法持久化，表现为默认值丢失或被清空。

✅ 正确做法：为每个下拉框生成唯一且可预测的 name 值，通常结合索引或唯一标识符：

光子AI

AI电商服饰商拍平台

下载

<form #testScript="ngForm">
  <div class="channel-container">
    <div
      class="channel"
      *ngFor="let currentChannel of members; let i = index"
    >
      <select
        class="form-select"
        [(ngModel)]="currentChannel.selectedValue"
        [name]="'channel_' + i"  <!-- ✅ 动态生成唯一 name -->
        #channelSelect="ngModel"
      >
        <option
          *ngFor="let testFormat of currentChannel.options"
          [ngValue]="testFormat"
        >
          {{ testFormat.val }}
        </option>
      </select>
    </div>
  </div>
</form>

⚠️ 注意事项：

• 不要使用静态字符串（如 "ddd"）作为循环内表单控件的 name；
• 推荐使用 [name] 绑定动态值（如 channel_0, channel_1），确保每次渲染都生成稳定唯一的名称；
• 若需在 TS 中访问特定控件状态，可配合 #ref="ngModel" 模板引用变量，或通过 NgForm 的 controls 对象按 name 查找；
• 即使不使用 ngForm，只要启用了 FormsModule 并使用 ngModel，name 的唯一性仍是必需的 —— 这是 Angular 表单系统的底层契约。

? 小技巧：你也可以利用 currentChannel.id（如果存在）代替索引，提升语义性与稳定性（尤其在数组可能增删时）：

[name]="'channel_' + currentChannel.id"

总结：Angular 模板驱动表单不是仅靠 ngModel 绑定就能工作的“魔法”，它高度依赖 HTML 表单规范中的 name 属性来区分控件。牢记 “每个 ngModel 控件必须有唯一 name”，即可避免此类静默失效问题。