利用angular4和nodejs-express构建一个简单的网站（七）

这一节对用户注册组件进行分析。
用户注册组件主要涉及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表单验证规则和验证方法可以查看官方文档中的介绍。