表单验证是在前端开发中非常重要的一环，它可以帮助我们保证用户输入的数据的正确性，从而防止出现程序的异常和错误。在 Angular 9 中，提供了非常方便和强大的表单验证机制，本文将会详细介绍如何使用 Angular 9 中的表单验证。
安装 Angular 9
在开始使用 Angular 9 中的表单验证前，首先需要安装 Angular 9 。
npm install -g @angular/cli
安装完成后，可以通过下面的命令创建一个新的 Angular 9 项目：
ng new my-app
其中 my-app 是创建的项目名称。
创建表单
在创建了 Angular 9 项目之后，我们需要创建一个用于表单验证的组件。可以通过下面的命令创建一个新的组件：
ng generate component form
然后打开 app.component.html 文件，添加如下代码：
-- -------------------- ---- -------
------
-----
------ --------------------------------
------ ----------- ------------- --------------- -----------------------
------
-----
------ --------------------------------
------ --------------- ------------- --------------- -----------------------
------
------- -----------------------------
-------这是一个简单的表单，有两个输入框和一个提交按钮。
配置表单验证
在 Angular 9 中，可以使用 FormsModule 模块中的 ngForm 指令来为表单添加验证。在使用该指令前需要先导入 FormsModule 模块并在 @NgModule 注解中声明它。
打开 app.module.ts 文件，修改如下代码：
-- -------------------- ---- ------- ------ - -------- - ---- ---------------- ------ - ------------- - ---- ---------------------------- ------ - ----------- - ---- ----------------- ------ - ------------ - ---- ------------------ ------ - ------------- - ---- ------------------------ ----------- ------------- -------------- --------------- -------- --------------- ------------- ---------- --- ---------- --------------- -- ------ ----- --------- --
在组件 form 中，我们可以在 <form> 标签上使用 ngForm 指令来为表单添加验证，例如：
<form #myForm="ngForm">
上面的代码中，我们将表单绑定到了 myForm 变量上，以便在后续的代码中使用。
对表单进行验证
在 Angular 9 的表单验证中，可以使用 ngModel 作为指令来为表单的输入框添加验证规则。可以使用 ngModel 中的 name 属性对输入框进行标识，然后在组件中使用 ngModel 的 ngModelGroup 属性对输入框进行分组，从而实现对整个表单的验证。
例如，下面的代码实现了对用户名和密码的验证：
-- -------------------- ---- -------
----- -----------------
-----
------ --------------------------------
------ ----------- ------------- --------------- -------- ------------- ---------------------- --------------------
---- --------------------- ----------------------- -- --------------- -- -------------------
---- ----------------------------------------- -- ---------------
---- ------------------------------------------ ------ -- -- ----- - ---------- -----------
------
------
-----
------ --------------------------------
------ --------------- ------------- --------------- -------- ------------- ---------------------- --------------------
---- --------------------- ----------------------- -- --------------- -- -------------------
---- ----------------------------------------- -- ---------------
---- ------------------------------------------ ------ -- -- ----- - ---------- -----------
------
------
------- -----------------------------
-------在上面的代码中：
required属性表示输入框必填；minlength属性表示输入框长度不能少于指定值；#username="ngModel"和#password="ngModel"属性表示将输入框绑定到username和password变量上，以便在后续的代码中使用。
同时，还添加了一个 error-message 类来显示验证错误信息。
在组件中处理表单提交
表单验证通过后，就可以在组件中处理表单提交了。可以使用 <form> 标签中的 submit 事件来处理表单提交，例如：
<form #myForm="ngForm" (submit)="onSubmit()">
...
<button type="submit">Submit</button>
</form>在组件的 onSubmit() 方法中，可以通过 NgForm 类的 value 属性获取表单的所有数据，例如：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------ - ---- -----------------
------------
--------- -----------
------------ ------------------------
---------- -------------------------
--
------ ----- ------------- -
--------- -------
--------- -------
---------- -
----------------- ------------ -------------------
-
-上面的代码中，可以通过 this.myForm.value 获取到表单的所有数据。
结论
通过上述代码的实现，可以让读者更好的了解在 Angular 9 中如何使用表单验证，从而让开发者更好的掌握 Angular 9 的表单验证知识点，同时也可以更好的实现前端开发。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/674e6ee2e884a3e30f2713c4