Angular 2 表单

Angular 2 是一个伟大的前端框架，它为web应用程序提供了强大的功能，包括表单处理。在这个文档中，我们将向您展示@angular/forms模块提供的组件和指令来创建并管理表单。

表单模块

在构建Angular 2的表单之前，首先需要导入表单模块。它可以在应用程序的app.module.ts文件中导入，如下所示：

import { FormsModule } from '@angular/forms';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

模板驱动表单

Angular 2 的模板驱动表单主要是利用模板中的指令来生成表单。在这种情况下，表单验证策略主要由HTML属性绑定来处理。下面是一个示例：

<form #f="ngForm" (ngSubmit)="onSubmit(f.value)">
  <div>
    <label for="name">Name:</label>
    <input type="text" id="name" name="name" [(ngModel)]="user.name" required>
  </div>
  <div>
    <label for="email">Email:</label>
    <input type="email" id="email" name="email" [(ngModel)]="user.email" required>
  </div>
  <button type="submit">Submit</button>
</form>

从上面的示例中，ngForm指令为表单提供了上下文，并且可以通过ngSubmit事件来提交表单。此外，ngModel指令允许我们双向绑定表单控件。

响应式表单

在Angular 2中，响应式表单主要由表单控件类和表单控件组类构成。表单控件类表示表单中的每个单独控件（如文本框，下拉列表等），而表单控件组类表示表单中的一组控件，例如，一组复选框或一组单选按钮。下面是响应式表单的示例：

import { Component } from '@angular/core';
import { FormGroup, FormControl, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  template: `
    <form [formGroup]="userForm" (ngSubmit)="onSubmit()">
      <p>
        <label>Name:</label>
        <input type="text" formControlName="name">
      </p>
      <p>
        <label>Email:</label>
        <input type="email" formControlName="email">
      </p>
      <p>
        <label>Password:</label>
        <input type="password" formControlName="password">
      </p>
      <p>
        <button type="submit">Submit</button>
      </p>
    </form>
  `
})
export class AppComponent {
  userForm = new FormGroup({
    name: new FormControl('', Validators.required),
    email: new FormControl('', [Validators.required, Validators.email]),
    password: new FormControl('', Validators.required)
  });

  onSubmit() {
    console.log(this.userForm.value);
  }
}

从上面的示例中，我们首先要导入FormGroup，FormControl和Validators这三个类。然后我们创建了一个名为userForm的表单组，其中包含了名为name，email和password的三个表单控件。这样我们就可以使用formControlName指令轻松地将这些控件和userForm绑定起来，在表单中添加验证规则。使用ngSubmit事件，我们可以将控件的值提交给控制器进行处理。

总结

使用Angular 2 表单，我们可以轻松地创建强大的表单，其功能多样，具有高级的验证规则。模板驱动和响应式表单都提供了一组强大的功能来满足您的应用程序的表单处理需求。无论您是哪种类型的开发者，Angular 2表单模块都可以让您快速创建高质量的表单。