上一章经由过程用户注册解说了相应式表单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两方面的学问。下一章将要解说用户登录的内容，在用户登录表单中，我将运用模板驱动型表单举行操纵。敬请期待……