在使用 Angular 框架开发前端应用时，表单是不可或缺的一部分。而随着 TypeScript 的流行，越来越多的开发者开始使用 TypeScript 来编写 Angular 应用的前端代码。那么在 TypeScript 中如何更好地使用 Angular 表单呢？本文将为你详细展示如何通过 TypeScript 来实现 Angular 表单的各种功能。
表单的基本使用
首先，让我们快速回顾一下 Angular 表单的基本使用，以便更好地理解后续的内容。在 Angular 中，我们使用 @angular/forms 包来实现表单功能。在使用它之前，你需要在你的 Angular 应用中导入该包：
------ - ------------ ------------------- - ---- -----------------
-----------
-------- -
------------
-------------------
--
-- ---
--
------ ----- --------- - -其中，FormsModule 用于模板驱动表单，ReactiveFormsModule 用于响应式表单。
下面是一个简单的例子，展示了在 HTML 模板中如何使用表单：
----- ------------------------
-------
---
------ ----------- ----------- ------------------ --
--------
-------
---
------ ------------- ---------- ----------------- --
--------
------- -------------------------
-------在这个例子中，我们定义了一个表单，其中包含两个输入框（分别是名字和年龄），以及一个提交按钮。我们使用 ngModel 指令来绑定输入框的值，ngSubmit 事件来监听表单的提交。在 TypeScript 代码中，我们可以使用以下代码来实现 onSubmit 方法：
------ ----- ------------ -
---- - ---
--- - --
---------- -
---------------------------------------------------
-
-这个例子是最基本的表单使用方式，在接下来的内容中，我们将深入探讨如何使用 TypeScript 更好地实现 Angular 表单功能。
响应式表单
响应式表单是 Angular 表单的更高级用法，它可以让我们更加精确地控制表单中的各个元素。在响应式表单中，我们通过代码来定义表单的各个元素，并将其与表单的值进行绑定。当表单的值发生改变时，我们可以立即进行响应。下面是一个简单的例子，展示了如何使用响应式表单：
------ - --------- - ---- ----------------
------ - ---------- ----------- - ---- -----------------
------------
--------- -----------
--------- -
----- ------------------ ------------------------
-------
---
------ ---------------------- --
--------
-------
---
------ --------------------- --
--------
------- -------------------------
-------
--
--
------ ----- ------------ -
---- - --- -----------
----- --- ----------------
---- --- ----------------
---
---------- -
---------------------------------------------------------------------------------------
-
-在这个例子中，我们定义了一个名为 form 的 FormGroup，并在其中创建了两个 FormControl，即 name 和 age。在 HTML 模板中，我们使用 formControlName 指令来指定每个表单元素绑定的 FormControl 名称，从而实现与 FormGroup 的双向数据绑定。
当用户在输入框中输入内容时，Angular 会自动将该内容同步到对应的 FormControl 中，并更新 FormGroup 中的值。我们可以通过 form.get 方法来获取 FormGroup 中指定表单元素的值，并在提交表单时将其发送到后端。
表单验证
在实际的应用中，我们经常需要对用户输入的数据进行校验。在 Angular 中，我们可以使用各种验证器来实现表单验证功能。比如，我们可以使用 Validators.required 验证器来确保用户必须填写某个表单元素，或者使用 Validators.minLength 验证器来确保用户输入的字符串长度符合要求。下面是一个例子，展示了如何使用响应式表单来验证用户输入：
------ - --------- - ---- ----------------
------ - ---------- ------------ ---------- - ---- -----------------
------------
--------- -----------
--------- -
----- ------------------ ------------------------
-------
---
------ ---------------------- --
---- ------------------------------- -- --------------------------
---- -----------------------------------------------------
---- ------------------------------------------------------------
------
--------
-------
---
------ --------------------- --
---- ------------------------------ -- -------------------------
---- ----------------------------------------------------
------
--------
------- -------------------------
-------
--
--
------ ----- ------------ -
---- - --- -----------
----- --- --------------- --------------------- --------------------------
---- --- --------------- ---------------------
---
---------- -
---------------------------------------------------------------------------------------
-
-在这个例子中，我们为 name 表单元素添加了两个验证器：Validators.required 和 Validators.minLength(3)。分别用于确保用户必须填写名字并且名字长度不能少于 3 个字符。对于 age 表单元素，我们只添加了 Validators.required 验证器，来确保用户必须填写年龄。
在 HTML 模板中，我们通过在每个表单元素后面添加一个 DIV 元素，并使用 *ngIf 指令来控制其显示和隐藏状态，来展示验证错误信息。当用户输入框失去焦点时，我们也将 touched 属性设置为 true，以便实时提示用户的输入是否合法。
自定义验证器
除了 Angular 内置的验证器之外，我们还可以自定义验证器来实现更加复杂的表单验证功能。自定义验证器通常用于根据一些特定的规则来验证用户输入。比如，我们可以使用自定义验证器来确保两个输入框的值相等，或者来校验一个密码是否符合要求。下面是一个例子，展示了如何创建一个自定义验证器：
------ - --------- - ---- ----------------
------ - ---------- ------------ ----------- ------------ --------------- - ---- -----------------
-------- ------------------------- ----------- -
------ --------- ----------------- - ----- -------- --- - - ---- -- -
----- -------- - ------------------------
----- --------------- - -------------------------------
------ -------- -- --------------- -- -------------- --- --------------------- - - ------------------- ---- - - -----
--
-
------------
--------- -----------
--------- -
----- ------------------ ------------------------
-------
---
------ -------------------------- --
--------
-------
-----
------ --------------------------------- --
---- -----------------------------------------------------
--------
------- -------------------------
-------
--
--
------ ----- ------------ -
---- - ------------------------
--------- ---- --------------------- --------------------------
---------------- ---- ---------------------
-- - ---------- ------------------------ ---
------------------- ------------ ------------ --
---------- -
----------------------------------------------------------
-
-在这个例子中，我们自定义了一个名为 passwordMatchValidator 的验证器函数。在该函数中，我们使用 control.get 方法来获取 password 和 confirmPassword 两个表单元素的值，并检查两个值是否相等。如果两个值不相等，则返回一个 passwordMismatch 键值对，表示验证不通过。
在构建 FormGroup 时，我们使用 { validator: passwordMatchValidator() } 配置项来将该自定义验证器添加到 FormGroup 中。在 HTML 模板中，我们使用 form.errors?.passwordMismatch 来判断两次密码输入是否一致，并在需的情况下提示用户输入错误消息。
总结
到这里，我们已经了解了如何在 TypeScript 中更好地使用 Angular 表单功能。我们学习了如何使用 FormGroup 和 FormControl 对象来实现响应式表单，以及如何使用内置和自定义验证器来进行表单验证。希望本文对你有所帮助。如果你还有任何问题或建议，欢迎在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/66449375d3423812e427aef3