最近工作比较忙，一直没有更新文章。原来看别人的文章感觉很过瘾，现在自己写才发现，要坚持下去真的很难。好了，废话少说，继续吧！
这一章主要讲利用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属性。如果需要具体实现方法的朋友，可以给我留言，我会在回复中告诉大家。
