Angular 8 提供了很多强大的工具和功能，使得前端开发人员可以更容易地构建一个完整的应用程序。其中，模板驱动表单是 Angular 8 中非常重要的一部分，它能够使我们快速创建一个表单，然后以 CRUD 的方式来操作这个表单的数据。
本文将为你全面介绍 Angular 8 中模板驱动表单的使用方法及其关键功能，让你可以更好地理解如何使用 Angular 8 快速开发出一个符合要求的表单，并支持增删改查操作。同时，我们还会提供示例代码，让你更好地理解和记忆这些概念。
什么是模板驱动表单？
模板驱动表单是 Angular 8 中用于创建表单的一种方式。这种方式基于 HTML 模板来创建表单，通过对表单控件进行特定属性的绑定，从而实现表单的初始化、数据绑定及数据提交等一系列操作。
需要注意的是，模板驱动表单与响应式表单是不同的两种方式。响应式表单是基于 reactive forms 模块创建的，它允许我们创建一个更灵活、可复用和可测试的表单。但相对而言，模板驱动表单更简单，更易于学习和使用，特别适合于小型或简单的表单。
模板驱动表单的关键概念
在深入了解模板驱动表单的具体实现前，我们需要先掌握一些关键概念，它们将在后续的实现中不断被提到。
FormControl
FormControl 是模板驱动表单的核心概念之一，它表示一个表单控件对象，用于管理控件的值、禁用状态和验证规则等。对于每个表单控件，都需要声明一个 FormControl，以便我们能够通过其 API 来进行表单的数据操作和验证。
掌握 FormControl 的 API 是使用模板驱动表单非常重要的一部分，它的常见方法包括 setValue、patchValue、reset、disable 和 enable 等。
ngModel
ngModel 是 Angular 8 中用于在模板驱动表单中进行双向数据绑定的指令。通过指定 ngModel 的属性，我们可以将 FormControl 与表单中的某个控件进行绑定，从而实现数据的双向绑定。
在模板驱动表单中，ngModel 还可以使用 Angular 内置的一些验证器，如 required、minlength、maxlength、pattern 等。
ngForm
ngForm 是 Angular 8 中用于表示一个表单的指令，它可以管理表单的提交、验证和重置等功能。可以使用 ngForm 指令将表单中的所有 FormControl 进行一次组合，从而实现表单的整体操作。
需要注意的是，ngForm 的实例只有在表单的最外层元素中才会被创建，所以，建议将表单控件都放在一个包含 ngForm 指令的 div 中。
ngSubmit
ngSubmit 是 Angular 8 中用于处理表单提交的指令，当 ngSubmit 事件被触发时，会调用该指令所在元素的方法。通过 ngSubmit，我们可以获取当前表单输入的所有数据，并进行相应的提交或处理操作。
模板驱动表单的实现方法
了解了模板驱动表单的关键概念后，我们现在就可以尝试使用 Angular 8 创建一个简单的表单，支持增删改查操作。
创建一个简单的表单
要创建一个简单的表单，首先需要声明一个 FormControl，然后通过 ngModel 指令将其与表单中的某个控件进行绑定。
// javascriptcn.com 代码示例 <form> <label>名称：</label> <input type="text" name="name" [(ngModel)]="name"> <br> <label>价格：</label> <input type="number" name="price" [(ngModel)]="price"> <br> <label>描述：</label> <textarea name="description" [(ngModel)]="description"></textarea> <br> <button type="submit">提交</button> </form>
以上代码中，我们创建了一个带有三个输入框和一个提交按钮的表单。通过 name 属性来为每个表单控件命名，然后通过 ngModel 指令将其与对应的属性进行双向绑定。最后，通过 button 标签来定义表单提交按钮。
需要注意的是，这里省略了 ngForm 和 ngSubmit 指令，我们将在后面对它们进行详细的介绍。
表单数据的验证
模板驱动表单可以使用 Angular 的内置验证器，如 required、minlength、maxlength、pattern 等来验证表单控件的输入是否合法。
// javascriptcn.com 代码示例 <form #f="ngForm" (ngSubmit)="onSubmit(f)"> <label>名称：</label> <input type="text" name="name" required minlength="2" maxlength="20" [(ngModel)]="name"> <br> <label>价格：</label> <input type="number" name="price" [(ngModel)]="price" min="10" max="100"> <br> <label>描述：</label> <textarea name="description" [(ngModel)]="description" pattern="[a-zA-Z]*"></textarea> <br> <button type="submit">提交</button> </form>
以上代码中，我们使用了 required、minlength、maxlength、min 和 max 等验证器对输入框进行了验证。同时，通过 pattern 属性对文本框进行了正则表达式匹配，这里只允许输入英文字母。
需要注意的是，每个表单控件的验证结果都会保存在其对应的 FormControl 实例中，我们可以通过访问 FormControl 的 API 来获取其验证结果。
表单数据的提交
在完成了表单数据的验证之后，我们可以通过向 ngSubmit 指令绑定一个方法来实现表单提交。
// javascriptcn.com 代码示例 <form #f="ngForm" (ngSubmit)="onSubmit(f)"> <label>名称：</label> <input type="text" name="name" required minlength="2" maxlength="20" [(ngModel)]="name"> <br> <label>价格：</label> <input type="number" name="price" [(ngModel)]="price" min="10" max="100"> <br> <label>描述：</label> <textarea name="description" [(ngModel)]="description" pattern="[a-zA-Z]*"></textarea> <br> <button type="submit">提交</button> </form>
以上代码中，我们为 form 元素绑定了一个名为 onSubmit 的方法，并在 ngSubmit 事件触发时调用这个方法。在 onSubmit 方法内部，我们可以使用 f.value 属性来获取表单中所有控件的值，并将其传递给后端进行处理。
总结
本文中，我们全面介绍了 Angular 8 中模板驱动表单的相关概念及其实现方法，包括 FormControl、ngModel、ngForm 和 ngSubmit 等。同时，我们还通过实例代码演示了如何使用模板驱动表单来创建一个支持增删改查操作的简单表单。
需要注意的是，尽管模板驱动表单与响应式表单是不同的两种方式，但它们都是 Angular 8 中创建表单的重要方法。当你需要创建小型或简单的表单时，模板驱动表单是一个不错的选择，而对于更复杂的表单，响应式表单将更加适用。
最后，我们希望这篇文章能够帮助你更好地理解模板驱动表单的使用方法及其关键功能，从而能够更快地构建出符合要求的前端应用。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/654c89677d4982a6eb601ebe