最近工作比较忙，一直没有更新文章。原来看别人的文章感觉很过瘾，现在自己写才发现，要坚持下去真的很难。好了，废话少说，继续吧！
这一章主要讲利用angularJs控制用户登录。在前面的用户注册表单中使用了angular的响应式表单。为了对angular的知识学习的全面一点，在用户登录的表单中，使用了模板驱动型表单。

先从html代码开始

<div class="div-login"><form (ngSubmit)="onSubmit()" #loginForm="ngForm"><div class="form-group"><label for="name">User name</label><input type="text" class="form-control" id="name" name="name" placeholder="Enter user name" [(ngModel)]="user.name" required#name="ngModel"><div *ngIf="name.invalid && (name.dirty || name.touched)"   class="alert alert-danger">User name is required!</div></div><div class="form-group"><label for="password">Password</label><div class="input-group"><input class="form-control" id="password" name="passwrod" placeholder="Enter password" [(ngModel)]="user.password"required #password="ngModel"></div><div *ngIf="password.invalid && (password.dirty || password.touched)" class="alert alert-danger">Password is required!</div></div><div class="form-group form-btn"><button type="submit" class="btn btn-primary" [disabled]="!loginForm.form.valid">Submit</button><button type="button" class="btn btn-light" (click)="loginForm.reset()">Cancel</button></div></form>
</div>

在这个html文件的<form>标签中，(ngSubmit)="onSubmit()"和用户注册表单一样，用于处理表单的提交操作，为了实现在表单不合法时提交按钮的disabled为false，需要让按钮能够访问到表单，从而获取到表单的状态，所以，需要在<form>标签中定义了一个模板引用变量 #loginForm，并且把赋值为“ngForm”，同时在submit按钮标签中加入：[disabled]="!loginForm.form.valid"。
两个<input>标签分别输入用户名和密码，通过ngModel创建双向绑定到组件类的User对象的name和password属性，用于读取和写入输入控件的值。这里需要注意一点：当在表单中使用 [(ngModel)] 时，必须要定义 name 属性。
模板驱动表单的验证都在html代码中实现，需要完成以下几项任务：

• 首先要定义模板引用变量，并赋值为"ngModel"，注意观察<input>标签中的 #name="ngModel"和#password="ngModel"。
• 两个用户名和密码的验证规则比较简单，只需required，在两个<input>标签中加入此属性。
• 显示验证错误信息和注册表单差不多，当模板引用变量即两个输入框变为dirty(控件值变化了)和touched(控件值被访问过)状态时，如果控件值无效(invalid)，就显示<div>标签包裹的内容。

html部分的内容就这些了，下面我们看一下控件类的内容。

控件类

先把代码放出来，后面慢慢分析。

@Component({selector: 'app-login',templateUrl: './login.component.html',styleUrls: ['./login.component.css']
})
export class LoginComponent {user: User = new User(0, '', '', '');constructor(private route: Router,private jumService: JumbotronServive,private userServ: UserService,private tokenServ: AuthTokenService) {jumService.setJumbotron(new Jumbotron('Login',`Please login with your user name and password first`,``));}onSubmit() {this.userServ.getUser(this.user).subscribe((resp) => {this.tokenServ.setToken(resp.body['token']);this.route.navigate(['/birthday']);alert('登录成功！');},(err)=>alert(this.userServ.handleError(err)),() => console.log('The Post observable is now completed. '))}
}

控件类主要完成了如下功能：

• 首先初始化了一个User类的对象，用于ngModel双向绑定到控件。保证在html控件值变化时，绑定的User类的属性同步变化。
• 在构造函数中声明了一个Router对象、一个JumbotronServive对象和UserService对象、AuthTokenService对象。并在构造函数中用JumbotronServive的setJumbotron方法更新了网页的标题。(JumbotronServive的setJumbotron方法具体内容请看前面的文章。)
• onSubmit()函数在表单提交时被触发，在该函数中UserService的getUser()函数，getUser()函数向服务器发送了用户名和密码，如果服务器验证成功，会发送回jwt认证信息的token字符串，其中包括了userid。在onSubmit()函数中调用AuthTokenService的setToken()函数，将这个字符串存储到本地存储，用于导航到下一个页面(生日页面)时验证用户信息。接下来导航到下一个页面，并提示用户登录成功。如果发生错误，提示错误原因。

用户登录主要的内容就这些了。其中还有一个小技巧性的东西就是在输入密码的时候，因为<input>标签的type=password，显示的输入内容为“.”,很容易输错。我在这个控件上放了一个可以切换的图片，用于让用户选择是否查看明文。实现的方法主要是改变<input>控件的attr属性。如果需要具体实现方法的朋友，可以给我留言，我会在回复中告诉大家。