模板驱动表单

模板驱动表单可用于许多应用程序，即登录、提交请求、下订单、数据录入等。

现在，让我们创建表单。 请按照以下步骤操作

创建一个项目

首先，使用以下命令创建一个名为angular-forms的新项目

现在，使用以下命令转到项目文件夹。

现在，使用 Angular CLI 命令 ng generate class Hero 生成一个名为 Hero 的新类

转到您的项目文件夹 angular-forms 并在 app 模块下打开 hero.ts 文件。 编写以下代码

TypeScript 编译器为每个公共构造函数参数生成一个公共字段，当您创建新的英雄时，它会自动将参数的值分配给该字段。

在这里，alterEgo 是可选的，构造函数可以省略它。

创建一个表单组件

Angular 表单由两部分组成

• 基于 HTML 的模板
• 用于处理数据和用户的组件类

现在，使用以下命令生成一个名为 HeroForm 的新组件

在 hero-form.component.ts 中编写以下代码

修改 app.module.ts 文件

app.module.ts 文件用于定义应用程序的根模块。 模板驱动表单驻留在它们自己的模块中。 在使用表单之前，需要将 FormsModule 添加到应用程序模块的导入数组中。

在 app.module.ts 文件中使用以下代码

在这里，我们导入了 FormsModule 并将 FormsModule 添加到 @NgModule 装饰器中定义的导入列表。 这用于访问应用程序的所有模板驱动表单功能，包括 ngModel。

修改 app.component.html 文件

app.component.html 用于托管新的 HeroFormComponent。 它是应用程序的根组件。 在 app.component.html 中编写以下代码

创建一个初始 HTML 表单模板

在 hero-form.component.html 中使用以下代码

设置表单样式

打开 style.css 并使用以下代码导入 bootstrap 文件。

使用 *ngFor 添加力量列表

英雄表单可以从机构批准的力量的固定列表中选择力量列表。 在 hero-form.component.html 中的 Alter Ego 组下方立即使用以下 HTML 代码

基本的模板驱动表单现已完成。 您可以使用 ng serve 命令来运行项目。

输出

您可以在此处查看英雄的力量。