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

发布时间 - 2026-01-14 00:00:00 点击率：次

在 angular 模板驱动表单中，若多个 `

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

在你的代码中：

共享 name="ddd" 时，Angular 会反复用最新渲染的控件覆盖前一个同名控件的模型引用 —— 最终只有最后一个

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

⚠️ 注意事项：

不要使用静态字符串（如 "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”，即可避免此类静默失效问题。