在 Angular 2 中，表单验证是一个非常重要的功能，能够帮助我们确保用户输入的数据符合我们的要求。ngModel 是 Angular 2 中的一个指令，它允许我们在表单元素中绑定数据，并且可以使用它来进行表单验证。
ngModel 的基本用法非常简单，我们只需要在表单元素上添加 ngModel 指令即可：
<input type="text" [(ngModel)]="username">
上面的代码中，我们使用了双向绑定来将输入框中的值绑定到一个名为 username 的变量上。这样，当用户输入数据时，我们就可以在组件中通过访问 username 变量来获取这个值。
但是，这只是 ngModel 的基本用法。要实现表单验证，我们需要使用一些其他的属性和指令。
首先，我们需要为表单元素设置一个 name 属性。这个属性用于在组件中访问表单元素。例如，我们可以在组件中通过访问 form.controls.username 来获取输入框中的值。
<input type="text" name="username" [(ngModel)]="username">
接下来，我们需要为表单元素添加一些验证规则。这可以通过添加一些 ngModel 的属性来实现。例如，我们可以添加一个 required 属性来指定输入框中的值不能为空：
<input type="text" name="username" [(ngModel)]="username" required>
这个属性告诉 Angular 2，如果输入框中的值为空，那么这个表单元素就是无效的。
除了 required 属性以外，还有很多其他的验证规则可以添加，例如 minlength、maxlength、pattern 等等。这些属性的用法和 required 属性类似，我们只需要在表单元素中添加它们即可。
<input type="text" name="username" [(ngModel)]="username" required minlength="5" maxlength="20" pattern="[a-zA-Z]+">
上面的代码中，我们添加了 minlength、maxlength 和 pattern 属性来指定输入框中的值的长度和格式。如果用户输入的值不符合这些规则，那么这个表单元素也是无效的。
最后，我们需要在组件中处理表单的提交事件。这可以通过添加一个 onSubmit 方法来实现。在这个方法中，我们可以检查表单是否有效，并且可以执行一些其他的操作，例如向服务器发送请求等等。
<form (submit)="onSubmit()"> <input type="text" name="username" [(ngModel)]="username" required minlength="5" maxlength="20" pattern="[a-zA-Z]+"> <button type="submit">Submit</button> </form>
-- -------------------- ---- -------
------ - --------- - ---- ----------------
------ - ------ - ---- -----------------
------------
--------- -----------
--------- -
----- --------------------------
------ ----------- --------------- ---------------------- -------- ------------- -------------- --------------------
------- -----------------------------
-------
-
--
------ ----- ------------- -
------ --------- -------
------ -------------- -------- ---- -
-- ------------ -
-- --------------
-
-
-上面的代码中，我们定义了一个 onSubmit 方法，并且在表单中添加了一个 submit 事件。当用户点击提交按钮时，Angular 2 会自动调用这个方法，并且将表单元素的值作为参数传递给它。在这个方法中，我们可以检查表单是否有效，并且可以执行一些其他的操作。
总结一下，在 Angular 2 中使用 ngModel 表单验证需要以下几个步骤：
- 在表单元素中添加 ngModel 指令，并且设置 name 属性。
- 在表单元素中添加验证规则，例如 required、minlength、maxlength、pattern 等等。
- 在组件中添加一个 onSubmit 方法，并且在表单中添加一个 submit 事件。
- 在 onSubmit 方法中检查表单是否有效，并且执行一些其他的操作。
希望这篇文章能够帮助你了解 Angular 2 中的表单验证，并且能够在实际项目中使用它。如果你有任何问题或者建议，欢迎在评论区留言。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65bdd76badd4f0e0ff7740ef