在 Angular 2 中使用 ngModel 表单验证-JavaScript中文网-JavaScript教程资源分享门户

在 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>

import { Component } from '@angular/core';
import { NgForm } from '@angular/forms';

@Component({
  selector: 'app-form',
  template: `
    <form (submit)="onSubmit(form)">
      <input type="text" name="username" [(ngModel)]="username" required minlength="5" maxlength="20" pattern="[a-zA-Z]+">
      <button type="submit">Submit</button>
    </form>
  `
})
export class FormComponent {
  public username: string;

  public onSubmit(form: NgForm): void {
    if (form.valid) {
      // 表单验证通过，可以提交数据了
    }
  }
}

上面的代码中，我们定义了一个 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