Angular 4 - 表单

在Angular 4中，表单是一个非常重要的概念。我们常常需要在应用程序中收集用户的输入、验证数据，并将数据发送到后端服务器。Angular 4提供了多种表单类型和验证机制，使我们能够轻松地构建强大的表单。

ReactiveForms和TemplateDrivenForms

在Angular 4中，有两种类型的表单：ReactiveForms和TemplateDrivenForms。ReactiveForms是基于响应式编程的方式构建表单，需要自己手动管理表单状态和验证。TemplateDrivenForms则是基于模板驱动的方式构建表单，需要添加一些Angular的内置指令。

ReactiveForms

ReactiveForms是使用FormGroup、FormControl和Validators三个类来创建表单。FormGroup表示一个表单组，FormControl表示一个表单控件，Validators是一组验证器，用于验证表单数据是否合法。

以下是一个简单的ReactiveForm示例：

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

@Component({
  selector: 'app-reactive-form',
  templateUrl: './reactive-form.component.html',
  styleUrls: ['./reactive-form.component.css']
})
export class ReactiveFormComponent implements OnInit {
  reactiveForm: FormGroup;

  ngOnInit() {
    this.reactiveForm = new FormGroup({
      username: new FormControl('', [Validators.required, Validators.minLength(5)]),
      password: new FormControl('', [Validators.required, Validators.minLength(6)])
    });
  }

  onSubmit() {
    if (this.reactiveForm.valid) {
      console.log('ReactiveForm Data: ', this.reactiveForm.value);
    }
  }
}

在组件中，我们创建了一个FormGroup对象，并使用FormControl来创建两个表单控件。我们还使用Validators.required和Validators.minLength验证器，以确保表单数据的正确性。

在模板中，我们可以使用formGroup指令来绑定FormGroup对象到表单，使用formControlName指令来绑定FormControl对象到表单控件。

<form [formGroup]="reactiveForm" (ngSubmit)="onSubmit()">
  <div>
    <label for="rusername">Username:</label>
    <input type="text" id="rusername" formControlName="username">
    <div *ngIf="reactiveForm.controls['username'].invalid && (reactiveForm.controls['username'].dirty || reactiveForm.controls['username'].touched)">
      <div *ngIf="reactiveForm.controls['username'].errors.required">Username is required</div>
      <div *ngIf="reactiveForm.controls['username'].errors.minlength">Username must be at least 5 characters long.</div>
    </div>
  </div>
  <div>
    <label for="rpassword">Password:</label>
    <input type="password" id="rpassword" formControlName="password">
    <div *ngIf="reactiveForm.controls['password'].invalid && (reactiveForm.controls['password'].dirty || reactiveForm.controls['password'].touched)">
      <div *ngIf="reactiveForm.controls['password'].errors.required">Password is required</div>
      <div *ngIf="reactiveForm.controls['password'].errors.minlength">Password must be at least 6 characters long.</div>
    </div>
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>

TemplateDrivenForms

TemplateDrivenForms使用ngModel和一些Angular的内置指令来创建表单。与ReactiveForms不同，模板驱动表单不需要手动创建FormGroup对象。

以下是一个简单的TemplateDrivenForm示例：

<form #templateDrivenForm="ngForm" (ngSubmit)="onSubmit()">
  <div>
    <label for="tusername">Username:</label>
    <input type="text" id="tusername" name="tusername" ngModel required minlength="5">
    <div *ngIf="templateDrivenForm.controls['tusername'].invalid && (templateDrivenForm.controls['tusername'].dirty || templateDrivenForm.controls['tusername'].touched)">
      <div *ngIf="templateDrivenForm.controls['tusername'].errors.required">Username is required</div>
      <div *ngIf="templateDrivenForm.controls['tusername'].errors.minlength">Username must be at least 5 characters long.</div>
    </div>
  </div>
  <div>
    <label for="tpassword">Password:</label>
    <input type="password" id="tpassword" name="tpassword" ngModel required minlength="6">
    <div *ngIf="templateDrivenForm.controls['tpassword'].invalid && (templateDrivenForm.controls['tpassword'].dirty || templateDrivenForm.controls['tpassword'].touched)">
      <div *ngIf="templateDrivenForm.controls['tpassword'].errors.required">Password is required</div>
      <div *ngIf="templateDrivenForm.controls['tpassword'].errors.minlength">Password must be at least 6 characters long.</div>
    </div>
  </div>
  <div>
    <button type="submit">Submit</button>
  </div>
</form>

在模板中，我们使用ngModel指令来绑定表单控件，使用name属性来指定控件的名称。我们也使用了一些内置指令，如required和minlength，以确保表单数据的正确性。

表单验证

Angular 4提供了多种验证器，可以验证表单控件的值是否合法。我们可以在创建FormControl或FormGroup对象时，传入Validators对象来添加验证器。

以下是一些常用的验证器：

• required：验证控件的值是否为空。

new FormControl('', Validators.required);

• email：验证控件的值是否为邮箱格式。

new FormControl('', Validators.email);

• minlength：验证控件的值是否至少为指定长度。

new FormControl('', Validators.minLength(5));

• maxlength：验证控件的值是否超过指定长度。

new FormControl('', Validators.maxLength(10));

• pattern：验证控件的值是否匹配指定正则表达式。

new FormControl('', Validators.pattern('[0-9]*'));

假设我们有一个表单控件，需要验证输入的值是否为数字，并且范围在1到100之间，如下所示：

new FormControl('', [Validators.required, Validators.pattern('^[1-9][0-9]?$|^100$')]);

总结

Angular 4提供了多种类型的表单，包括ReactiveForms和TemplateDrivenForms。我们可以使用FormGroup、FormControl和Validators来创建表单，并添加验证器来验证表单数据的正确性。无论您是使用响应式编程还是模板驱动编程，Angular 4都提供了灵活的工具来构建强大的表单。