Angular 9/8 选择下拉示例

在本节中，我们将学习如何在 Angular 8 或 Angular 9 中选择下拉菜单。为此，我们将提供一个非常简单的示例来在 Angular 8 或 Angular 9 中选择下拉菜单。 Angular 9/8 包含一个绑定选择下拉菜单的列表。我们将从下拉菜单选择的更改事件开始。

为了创建一个包含下拉框的反应式表单，我们将使用循环。在本节中，我们将提供两个示例来选择下拉菜单。在第一个示例中，当我们单击提交按钮时，我们可以获得所选下拉框的值。在第二个示例中，当更改事件发生时，我们可以获得所选下拉框的值。在我们的两个示例中，我们将使用 "websiteList" 变量创建下拉菜单。下面描述了获取下拉菜单的两个示例。为此，首先，我们必须添加表单验证，为此，我们将在 Angular 9 中遵循一些步骤，如下所述

示例 1：在表单提交时获取所选下拉菜单的值

步骤 1

在此步骤中，我们将导入 FormsModule。如果我们尝试使用 Angular 应用程序来创建表单，我们需要导入 FormsModule。我们将从 @angular/forms 库中导入它。因此，我们将使用 app.module.ts 文件并添加以下代码

src/app/app.module.ts

步骤 2

在第二步中，我们将执行带有 ngModel 的表单。为此，我们将使用 html 表单，并在其中使用 ngModel 编写代码。因此，我们将使用 app.component.html 文件来添加以下代码。在我们的表单中，我们将使用 bootstrap 类。

src/app/app.component.html

步骤 3

在此步骤中，我们将更新 Ts 文件。为此，我们将编写一个名为 submit() 的函数，然后，我们将能够获取输入字段的所有值。因此，我们将使用 app.component.ts 文件来添加以下代码

src/app/app.component.ts

现在，我们将使用以下命令运行以上示例

示例 2：在更改事件上获取所选下拉菜单的值

步骤 1

在此步骤中，我们将导入 FormsModule。如果我们尝试使用 Angular 应用程序来创建表单，我们需要导入 FormsModule。我们将从 @angular/forms 库中导入它。因此，我们将使用 app.module.ts 文件并添加以下代码

src/app/app.module.ts

步骤 2

在第二步中，我们将执行带有 ngModel 的表单。为此，我们将使用 html 表单，并在其中使用 ngModel 编写代码。因此，我们将使用 app.component.html 文件来添加以下代码。在我们的表单中，我们将使用 bootstrap 类。

src/app/app.component.html

步骤 3

在此步骤中，我们将更新 Ts 文件。为此，我们将编写一个名为 submit() 的函数，然后，我们将能够获取输入字段的所有值。因此，我们将使用 app.component.ts 文件来添加以下代码

src/app/app.component.ts

现在，我们将使用以下命令运行以上示例

运行以上命令后，我们将看到以下输出