Unable to get data from the form in Bootstrap 5 with Angular

Question

Using Angular and Bootstrap 5, I have this HTML code of a form:

<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 file:

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

But I can't get data from the form.

genreName data always null. I use select for genreName, but for others, I use input, so I can get data from input, but I can't get it from the form.

I changed value parameters like [value]="genre" but it didn't work.

Answer 1

I can't tell if you are doing template driven forms or reactive forms in your code, but either way it appears you haven't bound anything to your select.

If you are doing template driven forms, you need to bind to either the ngModel or subscribe to the changes event on the <select> element.

Example 1:

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

Example 2:

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

For more info on building a template driven form, please see Angular's Documentation

If you are using reactive forms, you need to add a formControl on the <select> element

Example 3:

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

For more information about reactive forms, please see Angular's docuentation