在 Angular7 应用中，表单验证是一个非常重要的话题。表单数据的验证可以避免用户输入不合法的数据，从而保证应用的数据质量和安全性。在本文中，我们将介绍 Angular7 应用中的表单验证技术，包括模板驱动表单验证和响应式表单验证。
模板驱动表单验证
模板驱动表单验证是 Angular7 中最常见的表单验证技术。它通过模板中的指令和表单控件的 ngModel 绑定来实现表单验证。下面是一个简单的模板驱动表单验证的示例代码：
-- -------------------- ---- -------
----- ---------------- ------------------------
---- -------------------
------ --------------------------------
------ ----------- ------------- --------------- -------------------- -------- ----------------------------
---- ----------------------- -- ------------------------------------ ------------ --------------
-------- -- ---------
------
------
---- -------------------
------ --------------------------------
------ --------------- ------------- --------------- -------------------- -------- ----------------------------
---- ----------------------- -- ------------------------------------ ------------ --------------
-------- -- ---------
------
------
------- ------------- ---------- ----------------------------
-------在上面的代码中，我们使用 ngForm 指令来创建一个表单，并使用 ngModel 指令来绑定表单控件的值。我们还使用 required 属性来指定表单控件是必填项。最后，我们使用 ngIf 指令来判断表单控件是否有效，如果无效则显示错误信息。
响应式表单验证
响应式表单验证是 Angular7 中的另一种表单验证技术。它通过使用 FormGroup 和 FormControl 类来实现表单验证。下面是一个简单的响应式表单验证的示例代码：
-- -------------------- ---- -------
----- -------------------- ------------------------
---- -------------------
------ --------------------------------
------ ----------- ------------- --------------- -------------------- ---------------------------
---- ------------------------------------------- ------------ --------------
-------- -- ---------
------
------
---- -------------------
------ --------------------------------
------ --------------- ------------- --------------- -------------------- ---------------------------
---- ------------------------------------------- ------------ --------------
-------- -- ---------
------
------
------- ------------- ---------- ----------------------------
-------在上面的代码中，我们使用 FormGroup 类来创建一个表单组，并使用 FormControl 类来创建表单控件。我们还使用 formControlName 属性来绑定表单控件的值。最后，我们使用 ngIf 指令来判断表单控件是否有效，如果无效则显示错误信息。
总结
在本文中，我们介绍了 Angular7 应用中的表单验证技术，包括模板驱动表单验证和响应式表单验证。我们还提供了示例代码来帮助读者理解表单验证的实现方式。希望读者通过本文的学习，能够在实际开发中灵活运用表单验证技术，提高应用的数据质量和安全性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65d69a4f1886fbafa4447318