Angular表单提交时获取ng-select值并传递至后端API的方法

一、模板（HTML）调整 #

确保ng-select正确绑定到表单控件，通过bindValue指定选中项的id作为表单值，示例代码如下：

<form [formGroup]="formNewTeam" (ngSubmit)="onSubmit()">
  <!-- 团队名称输入框 -->
  <input type="text" formControlName="teamName" placeholder="团队名称">

  <!-- ng-select 绑定国家ID -->
  <ng-select 
    formControlName="countryId"
    [items]="countries"
    bindValue="id"  <!-- 核心：将选中Country对象的id赋值给表单控件 -->
    bindLabel="frenchName"  <!-- 显示国家的法语名称 -->
    placeholder="选择国家">
  </ng-select>

  <button type="submit">提交</button>
</form>

二、TS代码处理 #

先初始化响应式表单，再处理提交逻辑，确保能同时获取teamName和countryId：

import { Component } from '@angular/core';
import { FormBuilder, FormGroup } from '@angular/forms';
import { Country } from './your-country-model-path'; // 替换为你的Country模型路径

@Component({
  selector: 'app-new-team',
  templateUrl: './new-team.component.html',
  styleUrls: ['./new-team.component.css']
})
export class NewTeamComponent {
  formNewTeam: FormGroup;
  countries: Country[] = []; // 从后端接口获取的国家列表

  constructor(private fb: FormBuilder) {
    // 初始化表单控件
    this.formNewTeam = this.fb.group({
      teamName: [''],
      countryId: ['']
    });
  }

  onSubmit() {
    if (this.formNewTeam.valid) {
      const submitData = this.formNewTeam.value;
      console.log(submitData); // 此时能拿到{teamName: "xxx", countryId: 对应选中的ID}
      // 调用后端API发送数据
      // this.teamService.createTeam(submitData).subscribe(res => { ... });
    }
  }
}

三、关键注意事项 #

1. 确保所在模块已导入ReactiveFormsModule，否则表单绑定会失效；
2. 检查bindValue的字段名是否与Country模型的id完全匹配，避免拼写错误；
3. 确认countries数组已正确加载，ng-select有可选项，否则选中值会为空。

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