利用angular4和nodejs-express构建一个简单的网站（七）—用户注册之ReactiveForm

这一节对用户注册组件进行分析。
用户注册组件主要涉及angular4表单的操作。Angular提供了两种构建表单的技术：响应式表单和模板驱动表单。 这两项技术都属于@angular/forms库，并且共享一组公共的表单控件类。我在用户注册组件(regist.component)中使用的是响应式表单(ReactiveFormsModule)，要了解更多angular表单的知识，可以访问官方文档，里面介绍的很详细。

注册组件模板分析

用户注册需要用户名、密码、邮箱（非必须）三个信息注册表单组件的模板代码如下：

<form [formGroup]="registForm" (ngSubmit)="onSubmit()" novalidate>
    <div class="form-group">
      <label for="name">User name</label>
      <input class="form-control" formControlName="name" id="name" required>
      <div *ngIf="name.invalid && (name.dirty || name.touched)" class="alert alert-danger">
        <div *ngIf="name.errors.required">
          Name is required!
        </div>
        <div *ngIf="name.errors.minlength">
          Name must be at least 4 characters long.
        </div>
        <div *ngIf="name.errors.pattern">
          Name must be composed of letters, numbers
        </div>
      </div>
    </div>
    <div class="form-group">
      <label for="password">Password</label>
      <input class="form-control" formControlName="password" type="password" required id="password" #pass>
      <div *ngIf="password.invalid && (password.dirty || password.touched)" class="alert alert-danger">
        <div *ngIf="password.errors.required">
          Password is required!
        </div>
        <div *ngIf="password.errors.minlength">
          Password must be at least 8 characters long.
        </div>
        <div *ngIf="password.errors.pattern">
          <!--密码必须由字母、数字、下划线和减号组成，首字母要求大写 -->
          Password must be composed of letters, numbers, '_', '-' and Capital letters must be capitalized.
        </div>
      </div>
    </div>
    <div class="from-group">
      <label for="repassword">Re Password</label>
      <input type="password" class="form-control" required id="repassword" (focus)="checkValid()"
       formControlName="repassword">
      <div class="alert alert-danger" *ngIf="repassword.invalid && (repassword.dirty || repassword.touched)">
        <div *ngIf="repassword.errors.required">
          Re password is required!
        </div>
        <div *ngIf="repassword.errors.comparePassword">
          Re password must equal password!
        </div>
      </div>
    </div>
    <div class="form-group email-group">
      <label for="email">Email</label>
      <input class="form-control" formControlName="email" type="email" id="email">
      <div *ngIf="email.invalid &&(email.dirty || email.touched)" class="alert alert-danger">
        <div *ngIf="email.errors.pattern">
          The email address format is incorrect
        </div>
      </div>
    </div>
    <div class="form-group form-btn">
      <button type="submit" class="btn btn-primary" [disabled]="registForm.invalid">Submit</button>
      <button type="button" class="btn btn-light" [disabled]="registForm.pristine" (click)="revert()">Cancel</button>
    </div>
  </form>

导航到regist组件后在name、password、repassword、email中添加相应的信息，点击Submit按钮，就会触发ngSubmit事件，在form标签中定义处理ngSubmit事件的函数onSubmit()，onSubmit()函数将注册信息发送到服务器。
novalidate阻止浏览器使用原生HTML表单验证，因为这里使用了angular的表单验证。
对于响应式表单需要在模板的form标签中声明formGroup(在这里formGroup声明为registForm)，还需要在输入控件（如input、select等）标签中声明formControlName。
模板中还有一些关于表单验证的内容，如下面的代码：

<div *ngIf="password.invalid && (password.dirty || password.touched)" class="alert alert-danger">
        ...
</div>

在表单状态为dirty（脏）状态和touched（碰过）状态时如果password为invalid(不合法，表单控件不合法（invalid）表示未能满足控件的验证规则)，div标识符中的内容将呈现到password控件的下方。违反了不同的验证规则，会呈现不同的内容，如在上一段代码中的div标签中还包裹着：

    <div *ngIf="password.errors.required">
          Password is required!
    </div>

表明在违反了“password.errors.required”规则时，会呈现“Password is required!”内容。
在提交按钮（Submit）上的标记[disabled]="registForm.invalid"，表示当form表单有不符合验证规则的输入时，按钮不能使用。
取消输入按钮（Cancel）在控件值未发生变化时（registForm.pristine）不能使用。
模板的基本分析就到这里，下面我们来看看ts文件中的组件类。

注册组件组件类分析

注册组件的组件类设计内容较多，在这里分部进行分析。
首先要创建响应式表单并定义表单的认证规则。需要从forms模块中引入FormBuilder、 FormGroup和Validators类。

import { FormBuilder, FormGroup, Validators } from '@angular/forms';

并在构造方法中声明并初始化这三个类。

constructor(
    ...
    private fb: FormBuilder,
    private userSer: UserService,
    private tokenServ: AuthTokenService) {
    ...
  }

下一步利用FormBuilder创建表单。创建一个方法createForm()，用于创建表单，方法中的代码如下：

this.registForm = this.fb.group({
      'name': [this.user.name, [
        Validators.required,
        Validators.minLength(4),
        Validators.pattern(/^[a-z]|[A-Z]|[0-9]$/)]],
      'password': [this.user.password,
      [Validators.required,
      Validators.minLength(8),
      Validators.pattern(/^[A-Z][a-zA-Z0-9_-]+$/)]],
      'email': [this.user.email,
      Validators.pattern(/^([a-zA-Z0-9_\.\-]+)@([a-zA-Z0-9_\.\-]+)\.([a-zA-Z]{2,4})$/)],
      'repassword': [this.user.password, [
        Validators.required]]
    });

registForm是一个FormGroup的实例，关联模板中的formGroup([formGroup]="registForm")，在类中进行声明：

registForm: FormGroup;

利用FormBuilder.group来生成响应式表单，FormBuilder.group是一个用来创建FormGroup的工厂方法，它接受一个对象，对象的键和值分别是FormControl的名字和它的定义。在这个对象中对name、password、email、repassword四个FormControl进行了初始化。定义了这四个FormControl的初始值对应User类的对象user的四个同名属性（repassword对应的是user.password，用于对用户密码的重复输入进行验证）。user对象也是在类中定义的：

user: User = new User(0, '', '', '');

表单验证

在FormControl的初始化中还定义了验证规则，这个表单的验证规则由以下几种：

• 必须输入内容（Validators.required）
• 最少需要x个字符（Validators.minlength(x)）
• 正则验证，必须由字母、数字组成 Validators.pattern(/^[a-z]|[A-Z]|[0-9]$/)
• 正则验证，必须由字母、数字、下划线和减号组成，首字母要求大写 Validators.pattern(/^[A-Z][a-zA-Z0-9_-]+$/)]]
• 必须符合email格式要求，可以使用Validators.email，也可以使用正则验证。

对FormControl进行验证，还需要编写get方法来访问表单控件：

  get name() { return this.registForm.get('name'); }
  get password() { return this.registForm.get('password'); }
  get email() { return this.registForm.get('email'); }
  get repassword() { return this.registForm.get('repassword'); }

这里还需要自定义一个验证器，用于验证repassword输入的值是否和password的值相同。
自定义验证器由一个验证工厂函数构成。代码如下：

import { AbstractControl,ValidatorFn } from '@angular/forms';

export function passwordEquals(password: string): ValidatorFn {
    return (control: AbstractControl): { [key: string]: any } => {
        const isEquals = (password === control.value);
        return isEquals ? null : { 'comparePassword': control.value };
    }
}

passwordEquals()方法需要传入一个string类型的参数，返回配置好的验证器函数。该函数接受一个Angular控制器对象，在控制器的值和参数相同时返回null，不相同时返回验证错误对象，错误对象是一个现实控件值的键值对。
将自定义验证器加到表单的repassword属性上，但因为passwordEquals()的参数需要的是password控件的值，而password控件的值不能在表单创建时拿到，需要在password控件有值后才能拿到。那么，进行自定义验证器加载的最好时机就是repassword控件获得焦点的时候。所以，在模板中要加入repassword控件的标签中加入焦点事件：(focus)="checkValid()",在处理焦点事件的checkValid()函数中，为repassword加入自定义验证规则，判断它的值是否和控件password的值相同：

checkValid() {
    this.repassword.setValidators([Validators.required, passwordEquals(this.pass.nativeElement.value)]);
  }

this.pass是通过在password的<input>组件中声明一个引用变量#pass后，通过@ViewChild('pass') pass: ElementRef;获取到password的<input>组件的值。
关于用户注册中响应式表单（ReactiveForm）的构建和验证基本上就是这些了，下一章将要介绍如何向服务器发送注册信息并导航到下一个模块。

关于angular表单验证规则和验证方法可以查看官方文档中的介绍。