我无法使用 Angular 从 Bootstrap 5 中的表单获取数据

Question

我正在使用 Angular 和 Bootstrap 5。我有一个表单。我有这样的 html 代码：

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

我的ts文件是这样的：

  addBook() {
    let bookModel:Book = Object.assign({}, this.bookAddForm.value);
  }

但我无法从表单获取数据。我的 GenreName 数据始终为空。我使用 select 作为 GenreName，但对于其他人，我使用输入，这样我可以从输入中获取数据，但无法从表单中获取数据。

我更改了值参数，例如 [value]="genre" 但不起作用。

Answer 1

我无法判断您在代码中是否正在执行模板驱动表单或反应式表单，但无论哪种方式，您似乎都没有将任何内容绑定到您的选择。

如果您正在执行模板驱动表单，则需要绑定到

ngModel

或订阅

changes

元素上的

<select>

事件。

示例1：

<select class="form-select" [(ngModel)]="book.genre">

示例2：

<select class="form-select" (change)="onGenreChange($event)">

有关构建模板驱动表单的更多信息，请参阅Angular 的文档

如果您使用反应式表单，则需要在

formControl

元素上添加

<select>

示例3：

<select class="form-select" [formControl]="bookAddForm">

有关反应式表单的更多信息，请参阅Angular的文档