Angular HTML表单下拉框选中值无法存入MySQL数据库问题求解

问题根源 #

修改后的select下拉框没有和billing.currency建立双向绑定，选中的值无法同步到模型中，自然没法正常入库。原来的文本输入框通过[(ngModel)]实现了双向绑定，而新的select代码缺失了这部分配置，同时也缺少Angular模板驱动表单必填的name属性。

修复步骤 #

• 给select标签添加双向绑定和name属性，和原输入框配置对齐
• 调整默认选项的value值，匹配currency字段的string类型，避免类型不匹配报错

修复后的完整代码如下：

<select [(ngModel)]="billing.currency" name="currency" id="currency">
    <option value="">--Select a Currency--</option>
    <option *ngFor="let dropdown of listDropdown" [value]="dropdown.Currency">{{dropdown.Currency}}</option>
</select>

补充排查 #

如果加了上述配置仍不生效，可以检查当前模块是否已经导入FormsModule，只有导入该模块后Angular的[(ngModel)]双向绑定才会生效：

// 对应模块的module.ts文件配置示例
import { FormsModule } from '@angular/forms';

@NgModule({
  imports: [
    // 其他导入项
    FormsModule
  ]
})

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