上一章通过用户注册讲解了响应式表单ReactiveForm，这章主要讲解如何向服务器提交注册数据并导航到好友信息模块。

提交注册信息

向服务器提交信息是通过模板中<form [formGroup]="registForm" (ngSubmit)="onSubmit()" novalidate>标签中的(ngSubmit)="onSubmit()进行提交的。在填写好正确的信息后，按钮<button type="submit" class="btn btn-primary" [disabled]="registForm.invalid">Submit</button>会变为可用状态，点击按钮后，onSubmit()方法就会得到执行，onSubmit()方法的代码为：

onSubmit() {this.user = this.prepareSaveUser();this.userSer.saveUser(this.user).subscribe(() => {this.tokenServ.setToken(value['token']);this.router.navigate(['/birthday']);alert('注册成功！');},(err) =>alert(this.userSer.handleError(err)),() => {console.log('The post observable is now completed.');});

prepareSaveUser()方法用于将FormGroup类型对象registForm的属性值赋给一个User对象，并返回这个对象，用于发送用户数据（利用FormGroup构建响应式表单的内容，请看第七章的内容）。prepareSaveUser()方法的代码如下：

prepareSaveUser(): User {const formModel = this.registForm.value;const saveUser: User = {id: this.user.id,name: formModel.name as string,password: formModel.password as string,email: formModel.email};return saveUser;}

把prepareSaveUser()方法的返回值赋值给User对象之后，调用UserService类的saveUser()方法，将注册信息发送到服务器（关于UserService服务类，请看第五章的内容）。如果注册成功，服务器会返回一个token字符串，存储了从服务器获取需要用户认证的内容时凭证。利用AuthTokenService的setToken()方法将这个凭证存储到本地。AuthTokenService类的代码：

import { Injectable } from '@angular/core';
@Injectable()
export class AuthTokenService{setToken(token:string){sessionStorage.removeItem('token');if((token as string).length != 0){sessionStorage.token = token;console.log('sessionStorage.token: ' + sessionStorage.token);} }getToken(){if(sessionStorage.token){return sessionStorage.token;}else{return null;}}
}

AuthTokenService类是一个服务类，因为其他模块也需要用到，将它放到AppModule的providers数组中：

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

这个服务提供商的主要工作就是将token的值存储到sessionStorage中，在需要的时候进行取出。 sessionStorage针对一个 session 进行数据存储。当用户关闭浏览器窗口后，数据会被删除。
如果在注册过程中发现错误，就在对话框中显示UserService的handleError()方法返回的错误提示信息。

导航到下一页面

如果注册成功，就调用Router类的navigate()方法，跳转到/birthday的url,进入BirthdaysModule模块。

重置Form

如果需要重新填写表单内容，按Cancel按钮后，将触发revert()方法，代码如下：

reset() {this.user = new User(0, '', '', '');this.registForm.reset({name: this.user.name,               password: this.user.password,email: this.user.email})}

这里主要调用了FormGroup类的reset()方法，将所有属性值设为this.user对象的属性值，从而实现表单的重置。

总结

用户注册的内容大致就是这些，主要知识包括angular的HttpClient、ReactForm两方面的知识。下一章将要讲解用户登录的内容，在用户登录表单中，我将使用模板驱动型表单进行操作。敬请期待......