详解Angular2表单-模板驱动的表单(Template-Driven Forms)

详解Angular2表单-模板驱动的表单(Template-Driven Forms)

在 Angular2 中，表单是一个常用的元素，我们经常通过表单来收集用户的数据。Angular2 提供了两种方式处理表单：模板驱动的表单和响应式表单。本文将详细讲解模板驱动的表单。

模板驱动的表单

模板驱动的表单使用模板来处理表单，这意味着我们在 HTML 中定义表单，通过双向数据绑定将表单绑定到组件的属性上。通过模板，我们可以操作表单，使用一些指令来验证表单，如 ngModel、 ngForm、 ngControl 等。

创建模板驱动表单

我们先来看一个简单的例子，如何在组件中创建一个模板驱动表单。

<form #myForm="ngForm" (ngSubmit)="onSubmit(myForm)">
  <div>
    <label for="name">Name:</label>
    <input type="text" [(ngModel)]="name" name="name" #name="ngModel" required>
    <div [hidden]="name.valid || name.pristine" class="alert alert-danger">
      Name is required
    </div>
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" [(ngModel)]="email" name="email" #email="ngModel" required>
    <div [hidden]="email.valid || email.pristine" class="alert alert-danger">
      Email is required
    </div>
  </div>
  <button type="submit" [disabled]="!myForm.form.valid">Submit</button>
</form>

在上面的代码中，我们使用 ngForm 指令来定义表单，并使用 ngSubmit 事件来提交表单。在定义表单中，我们使用 ngModel 指令来绑定表单元素到组件的属性上。每个表单元素都需要一个名字，此处我们使用 name 属性来为表单元素命名。

通过 #name="ngModel" 可以将 ngModel 指令赋值给一个模板变量。我们可以通过 name.valid 来判断表单元素是否合法，name.pristine 判断是否“干净（未修改过）”。

验证表单

在模板驱动表单中，Angular2 提供了一些内置的指令来进行表单验证，如 required、 min、 max、 pattern 等。

在上面的例子中，我们使用了 required 指令来验证表单是否输入，其它验证指令的使用方法也类似。

示例

下面是一个简单的登录表单，演示了如何使用模板驱动表单。

<form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm)">
  <div>
    <label for="username">Username:</label>
    <input type="text" [(ngModel)]="username" name="username" #username="ngModel" required>
    <div [hidden]="username.valid || username.pristine" class="alert alert-danger">
      Username is required
    </div>
  </div>
  <div>
    <label for="password">Password:</label>
    <input type="password" [(ngModel)]="password" name="password" #password="ngModel" required>
    <div [hidden]="password.valid || password.pristine" class="alert alert-danger">
      Password is required
    </div>
  </div>
  <button type="submit" [disabled]="!loginForm.form.valid">Login</button>
</form>

在组件中，我们需要定义 onSubmit() 方法来处理表单提交，代码如下：

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

@Component({
  selector: 'my-app',
  template: `<form #loginForm="ngForm" (ngSubmit)="onSubmit(loginForm)">
              <div>
                <label for="username">Username:</label>
                <input type="text" [(ngModel)]="username" name="username" #username="ngModel" required>
                <div [hidden]="username.valid || username.pristine" class="alert alert-danger">
                  Username is required
                </div>
              </div>
              <div>
                <label for="password">Password:</label>
                <input type="password" [(ngModel)]="password" name="password" #password="ngModel" required>
                <div [hidden]="password.valid || password.pristine" class="alert alert-danger">
                  Password is required
                </div>
              </div>
              <button type="submit" [disabled]="!loginForm.form.valid">Login</button>
            </form>`
})
export class AppComponent {
  username: string;
  password: string;

  onSubmit(form: NgForm) {
    if (form.valid) {
      console.log('Username: ' + this.username);
      console.log('Password: ' + this.password);
    }
  }
}

总结

本文介绍了 Angular2 中的模板驱动表单，包括创建表单、验证表单和一个登录表单的示例。模板驱动表单可以方便快捷地使用模板来创建表单，并提供了内置的验证指令来验证表单。