在 Angular 中，表单验证是非常重要的一环，因为一个良好的表单验证能够提升用户体验，降低后台负担。本文将会讲解 Angular 中表单验证的常见方式，并提供示例代码。
基本使用
Angular 中表单验证最基本的方式是使用 Angular 内置的验证器。
我们可以在表单控件的 validators 属性中提供验证器，这些验证器可以是单个的也可以是一组。例如，我们要验证用户名是否为空：
<form> <input type="text" name="username" [ngModel]="username" required> <button type="submit">Submit</button> </form>
在这个表单中，我们给了 input 元素一个名字为 “username” ，然后在 required 属性中设置了必填验证器。
当我们点击提交按钮时，如果用户名为空，则表单无法提交。这是因为 Angular 已经对该表单元素增加了 ng-invalid 和 ng-dirty 这两个 CSS 类。
自定义验证器
Angular 也允许我们定义自己的验证器。我们可以使用 Validators 类中提供的静态方法来定义一个验证器。
例如，我们要验证两个密码是否一致：
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------------ ---------- ---------- - ---- -----------------
------------
--------- --------------------
------------ ---------------------------------
--
------ ----- --------------------- -
------------ - --- -----------
--------- --- --------------- ---------------------
--------------- --- --------------- ---------------------
---
------ --------------------------------- ---------- -
----- -------- - --------------------------------
----- -------------- - --------------------------------------
-- ---------------------- -- -- -
------ -----
-
-- --------------- --- --------- -
------ -
------------- -----
--
-
------ -----
-
-在这个表单中，我们使用了两个 FormControl ，分别表示密码和确认密码，然后将它们放在一个 FormGroup 中。
同时，我们自定义了一个名为 passwordMatchValidator 的验证器函数。这个函数需要使用 formGroup.get 方法来获取表单元素的值，并使用 return 语句返回验证结果。
在模板中使用自定义验证器
一旦我们定义了一个自己的验证器，我们可以在 HTML 模板中使用它。例如，我们可以为确认密码字段添加自定义验证器：
<ng-container formGroupName="passwordForm">
<input type="password" formControlName="password" placeholder="Password" required>
<input type="password" formControlName="repeatPassword" placeholder="Repeat Password" [ngModel]="passwordRepeat" [validatePasswordMatch]="passwordForm">
<div *ngIf="passwordRepeat.errors?.doesNotMatch">
Passwords do not match.
</div>
</ng-container>注意 input 元素中的 [validatePasswordMatch] 属性。它的值为 passwordForm，表示这个验证器是基于整个表单而不是单个控件的。
此外，我们也根据这个属性的值绑定了 passwordRepeat 变量，它表示输入框中的确认密码。我们将它绑定到 ngModel 属性中可以实现双向绑定。
在最后，我们在 div 元素中使用 *ngIf 指令来根据 passwordRepeat.errors 判断验证是否失败。
总结
在 Angular 中，表单验证是非常重要的。我们可以使用内置的验证器，也可以定义自己的验证器。无论哪种方法，都要确保表单验证能够提升用户体验，降低后台负担。
本文提供了基本的示例代码，希望对读者有所帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/647ff67c48841e9894f79328