在前端开发中，表单是不可避免的一部分。而在 Angular 中，我们可以使用模板驱动表单和模型驱动表单两种方式来处理表单。本文将详细介绍这两种方式的区别、优缺点以及如何使用。
模板驱动表单
模板驱动表单是 Angular 原始的方式，它使用模板引擎来绑定表单控件和模型数据。我们可以在表单控件中使用 ngModel 指令来进行数据双向绑定，然后使用 ngForm 指令包裹整个表单，通过 $valid 和 $invalid 属性来判断表单的有效性。
下面是一个简单的模板驱动表单示例：
<form #myForm="ngForm"> <input type="text" name="username" ngModel required> <input type="password" name="password" ngModel required> <button type="submit" [disabled]="myForm.invalid">登录</button> </form>
在上面的代码中，我们使用了 ngForm 指令包裹整个表单，然后在表单控件中使用了 ngModel 指令来进行数据双向绑定，并且设置了 required 属性来表示这个控件是必填的。最后，我们通过 [disabled] 属性来判断表单是否有效，从而禁用登录按钮。
模板驱动表单的优点是易于使用，能够快速实现表单功能，适用于简单的表单场景。但是缺点也显而易见，当表单比较复杂时，使用模板驱动表单会难以维护。
模型驱动表单
模型驱动表单（也叫响应式表单）是 Angular 推荐的表单方案，它使用 Reactive Forms 模块来实现表单功能，提供了更加灵活、强大的表单控制能力，适用于复杂的表单场景。
模型驱动表单的核心思想是将表单控件映射到一个表单模型中，通过代码来控制表单的行为和验证。我们可以使用 FormGroup 和 FormControl 类来创建表单和控件。
下面是一个简单的模型驱动表单示例：
<form [formGroup]="myForm" (ngSubmit)="onSubmit()"> <input type="text" formControlName="username"> <input type="password" formControlName="password"> <button type="submit" [disabled]="myForm.invalid">登录</button> </form>
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------ ---------- ---------- - ---- -----------------
------------
--------- ------------
------------ ------------------------
--
------ ----- -------------- -
------- ----------
------------------- --- ------------ -
----------- - ---------------
--------- ---- ---------------------
--------- ---- --------------------
---
-
---------- -
-------------------------------
-
-在上面的代码中，我们首先在组件中导入 FormBuilder、FormGroup 和 Validators 类，然后在构造函数中使用 FormBuilder 来创建表单和控件。在模板中，我们使用 formGroup 指令将表单和表单模型进行绑定，然后使用 formControlName 指令将表单控件绑定到表单模型的字段上。
模型驱动表单的优点是灵活、强大，能够适应复杂的表单场景，并且可以提高代码的可维护性。但是缺点也是显而易见的，它相对于模板驱动表单来说，需要编写更多的代码。
总结
在本文中，我们详细介绍了 Angular 中的模板驱动表单和模型驱动表单两种方式，以及它们的优缺点。对于简单的表单场景，可以使用模板驱动表单来快速实现表单功能，对于复杂的表单场景，推荐使用模型驱动表单来实现。希望本文对你学习和使用 Angular 表单有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/649d0a3848841e98949c08b2