2.4 表单数据的验证
通常情况下，表单的数据是有一定规则的，我们需要依照其规则对输入的数据做验证以及反馈验证结果。Angular 2中对表单验证有非常完善的支持，我们继续上面的例子，在login组件中，我们定义了一个用户名和密码的输入框，现在我们来为它们加上规则。首先我们定义一下规则，用户名和密码都是必须输入的，也就是不能为空。更改login.component.ts中的模板为下面的样子：
<div>
<input required type="text"
[(ngModel)]="username"
#usernameRef="ngModel"
/>
{{usernameRef.valid}}
<input required type="password"
[(ngModel)]="password"
#passwordRef="ngModel"
/>
{{passwordRef.valid}}
<button (click)="onClick()">Login</button>
</div>
注意，我们只是为username和password两个控件加上了required这个属性，表明这两个控件为必填项。通过#usernameRef=”ngModel”我们重新又加入了引用，这次的引用指向了ngModel，这个引用是要在模板中使用的，所以才加入这个引用。如果不需要在模板中使用，可以不要这句。{{表达式}}双花括号表示解析括号中的表达式，并把这个值输出到模板中。
这里我们为了可以显性地看到控件的验证状态，直接在对应控件后输出了验证的状态。初始状态可以看到两个控件的验证状态都是false，试着填写一些字符在两个输入框中，看看状态变化吧，如图2.6所示。
图2.6 表单验证状态
我们知道了验证的状态是什么，但是如果我们想知道验证失败的原因怎么办呢？我们只需要将{{usernameRef.valid}}替换成{{usernameRef.errors | json}}即可。|是管道操作符，用于将前面的结果通过管道输出成另一种格式，这里就是把errors对象输出成json格式的意思。看一下结果吧，返回的结果如下，见图2.7。
图2.7 管道输出
如果除了不能为空，我们为username再添加一个规则试试看呢，比如字符数不能少于3：
<input type="text"
[(ngModel)]="username"
#usernameRef="ngModel"
required
minlength="3"
/>
这时打开浏览器，看一下效果，如图 2.8所示。
图2.8 多规则验证
现在我们试着把{{表达式}}替换成友好的错误提示，我们想在有错误发生时显示错误的提示信息。那么我们来改造一下template：
<div>
<input type="text"
[(ngModel)]="username"
#usernameRef="ngModel"
required
minlength="3"
/>
{{ usernameRef.errors | json }}
<div *ngIf="usernameRef.errors?.required">this is required</div>
<div *ngIf="usernameRef.errors?.minlength">should be at least 3 charactors</div>
<input required type="password"
[(ngModel)]="password"
#passwordRef="ngModel"
/>
<div *ngIf="passwordRef.errors?.required">this is required</div>
<button (click)="onClick()">Login</button>
</div>
ngIf也是一个Angular 2的指令，顾名思义，是用于做条件判断的。*ngIf=”
usernameRef.errors?.required”的意思是当usernameRef.errors.required为true时显示div标签。那么，那个?是干嘛的呢？因为errors可能是个null，如果这个时候调用errors的required属性肯定会引发异常，那么?就是标明errors可能为空，在其为空时就不用调用后面的属性了。
如果我们把用户名和密码整个看成一个表单的话，我们应该把它们放在一对<form></form>标签中，类似地加入一个表单的引用formRef：
<div>
<form #formRef="ngForm">
<input type="text"
[(ngModel)]="username"
#usernameRef="ngModel"
required
minlength="3"
/>
<div *ngIf="usernameRef.errors?.required">this is required</div>
<div *ngIf="usernameRef.errors?.minlength">should be at least 3 charactors</div>
<input type="password"
[(ngModel)]="password"
#passwordRef="ngModel"
required
/>
<div *ngIf="passwordRef.errors?.required">this is required</div>
<button (click)="onClick()">Login</button>
</form>
</div>
这时运行后会发现原本好用的代码出错了，这是由于如果在一个大的表单中，ngModel会注册成Form的一个子控件，注册子控件需要一个name，这要求我们显式地指定对应控件的name，因此我们需要为input增加name属性：
<div>
<form #formRef="ngForm">
<input type="text"
name="username"
[(ngModel)]="username"
#usernameRef="ngModel"
required
minlength="3"
/>
<div *ngIf="usernameRef.errors?.required">this is required</div>
<div *ngIf="usernameRef.errors?.minlength">should be at least 3 charactors</div>
<input type="password"
name="password"
[(ngModel)]="password"
#passwordRef="ngModel"
required
/>
<div *ngIf="passwordRef.errors?.required">this is required</div>
<button (click)="onClick()">Login</button>
<button type="submit">Submit</button>
</form>
</div>
既然我们增加了一个formRef，我们就看看formRef.value有什么吧。 首先为form增加一个表单提交事件的处理 <form #formRef=”ngForm” (ngSubmit)=”onSubmit(formRef.value)”>。 然后在组件中增加一个onSubmit方法：
onSubmit(formValue) {
console.log(formValue);
}
你会发现formRef.value中包括了表单所有填写项的值。还是在浏览器Console中观察一下，如图 2.9所示。
图 2.9 表单引用
有时候，在表单项过多时需要对表单项进行分组，HTML中提供了fieldset标签用来处理。那么我们看看怎么和Angular 2结合吧：
<div>
<form #formRef="ngForm" (ngSubmit)="onSubmit(formRef.value)">
<fieldset ngModelGroup="login">
<input type="text"
name="username"
[(ngModel)]="username"
#usernameRef="ngModel"
required
minlength="3"
/>
<div *ngIf="usernameRef.errors?.required">this is required</div>
<div *ngIf="usernameRef.errors?.minlength">should be at least 3 charactors</div>
<input type="password"
name="password"
[(ngModel)]="password"
#passwordRef="ngModel"
required
/>
<div *ngIf="passwordRef.errors?.required">this is required</div>
<button (click)="onClick()">Login</button>
<button type="submit">Submit</button>
</fieldset>
</form>
</div>
<fieldset ngModelGroup=”login”>意味着我们对于fieldset之内的数据都分组到了login对象中，在浏览器Console中可以看到这个对象的输出，如图 2.10所示。
图2.10 表单验证
接下来我们改写onSubmit方法用来替代onClick，因为看起来这两个按钮重复了，我们需要去掉onClick。首先去掉template中的<button (click)="onClick()">Login</button>，然后把<button type="submit">标签后的Submit文本替换成Login，最后改写onSubmit方法：
onSubmit(formValue) {
console.log('auth result is: '
+ this.service.loginWithCredentials(formValue.login.username, formValue.login.password));
}
在浏览器中试验一下吧，所有功能正常工作。
相关资源：敏捷开发V1.0.pptx