Html 我无法从带Angular 的Bootstrap 5中的表单中获取数据

发布于12月21日

我使用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数据始终为空.我对genreName使用了SELECT，但是对于其他人，我使用了INPUT，所以我可以从INPUT中获取数据，但不能从Form中获取数据.

console log like this个

我更改了值参数，如[Value]="genre"，但不起作用.

推荐答案

我不知道你在代码中是在做模板驱动的表单还是react 式表单，但无论哪种方式，你似乎都没有将任何东西绑定到你的 Select .

如果您正在使用template driven forms，则需要绑定到ngModel或订阅<select>元素上的changes事件.

例1:

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

示例2:

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

有关建造template driven form的更多信息，请参阅Angular's Documentation

如果您使用的是reactive forms，则需要在<select>元素上添加formControl

示例3:

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

关于reactive forms的更多信息，请参见Angular's docuentation

Html相关问答推荐

CSS动画积分计数器

有没有一种方法可以用css和html在桌面上并排显示列，在移动设备上显示一个下方的列？

CURL邮箱中的图像不能调整其大小

容器内的SVG图像没有响应

HTML+CSS+JS动态选中文本高亮 colored颜色变化

带有MathJax SVG的HTML代码在XHTML中不起作用

根据屏幕大小拆分长行列表

现代网络浏览器可以并行下载哪些类型的网络资源？还有，什么东西不能并行下载？

更改Angular 为17的material Select 字段的高度？

如何在HTML中适当地为单选按钮网格添加标签？

如何突破安莉得分

如何在网格中拥有离散的行

如何在页面太短时使<；img&>缩小而不发生y溢出

如何显示自定义按钮以将产品添加到WooCommerce购物车？

如何在ASP.NET Core中添加换行符

根据Tailwind CSS中的子计数而非子宽度进行对齐，并水平对齐

如何在CSS伪类函数中使用复合 Select 器：host-context()

Django 如何从文件系统下载文件？

为什么盒子不在div中显示？

将现有内容拆分为三列或部分

实用课程推荐