Angular + Bootstrap 5 表单下拉选框数据无法获取的问题

嘿，我来帮你搞定这个下拉选框拿不到数据的问题！核心原因其实很简单：你的下拉选框没有和表单控件建立绑定关系，所以表单根本没法捕获它的值，自然genreName就一直是null啦。

先看你的代码，不管用的是响应式表单还是模板驱动表单，都得给select加上绑定才行，我分情况给你讲：

情况1：你用的是响应式表单（从this.bookAddForm.value看大概率是） #

1. 首先给select标签加上formControlName="genreName"，这个属性要和你在组件里定义的表单控件名完全一致；
2. 选项的value绑定要准确：如果只想拿genreName字符串，就用[value]="genre.genreName"；如果想拿整个genre对象，得用[ngValue]="genre"（因为普通value只能绑字符串，ngValue才能绑对象）；
3. 那个“Tür ekle”选项最好给个明确的value，方便你后续判断是否要触发新增分类的逻辑。

修改后的HTML代码示例：

<div class="mb-3">
  <label for="genreName"> Tür adı</label>
  <div *ngIf="!enterTheGenre" class="form-group">
    <select class="form-select" formControlName="genreName">
      <option [value]="genre.genreName" *ngFor="let genre of genres">
        {{ genre.genreName }}
      </option>
      <option value="add-new">Tür ekle</option>
    </select>
  </div>
</div>

还要确认组件里的表单初始化包含了genreName控件，比如在ngOnInit里：

import { FormBuilder, FormGroup } from '@angular/forms';

// 组件类里
bookAddForm: FormGroup;

constructor(private fb: FormBuilder) {}

ngOnInit(): void {
  this.bookAddForm = this.fb.group({
    // 其他表单控件比如书名、作者等
    genreName: [''] // 初始值设为空字符串
  });
}

这时候你在addBook方法里就能拿到值了：

addBook() {
  const formData = this.bookAddForm.value;
  console.log(formData.genreName); // 现在就能正常获取下拉选的值啦
  let bookModel: Book = Object.assign({}, formData);
}

情况2：如果用的是模板驱动表单 #

那你需要给select加上双向绑定[(ngModel)]="bookModel.genreName"，同时组件里要定义对应的bookModel对象，还要确保模块里导入了FormsModule：

HTML代码：

<div class="mb-3">
  <label for="genreName"> Tür adı</label>
  <div *ngIf="!enterTheGenre" class="form-group">
    <select class="form-select" [(ngModel)]="bookModel.genreName" name="genreName">
      <option [value]="genre.genreName" *ngFor="let genre of genres">
        {{ genre.genreName }}
      </option>
      <option value="add-new">Tür ekle</option>
    </select>
  </div>
</div>

组件里：

bookModel: Book = { genreName: '', /* 其他属性 */ };

addBook() {
  console.log(this.bookModel.genreName); // 能拿到值
}

最后再提几个容易踩的坑： #

• 别忘了在对应模块里导入ReactiveFormsModule（响应式表单用）或者FormsModule（模板驱动用），不然绑定会失效；
• 如果绑定的是整个genre对象，记得用[ngValue]而不是[value]，不然拿到的会是对象的字符串表示，不是实际对象。

备注：内容来源于stack exchange，提问作者Şahin Yakıcı