这一节对用户注册组件进行分析。
用户注册组件主要涉及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）的构建和验证基本上就是这些了，下一章将要介绍如何向服务器发送注册信息并导航到下一个模块。
