然后，我们对姓名输入框添加验证，并根据验证的结果显示不同的提示，同时，为了演示Angular2表单控件的特性，再添加几个提示，来显示该值的状态，代码如下：
<input type="text" [(ngModel)]="user.name" #name="ngModel" required minlength="3"> <span *ngIf="name.pristine">未修改</span> <span *ngIf="name.dirty">已修改</span> <span *ngIf="name.valid">有效</span> <div [hidden]="name.valid || name.pristine"> <p *ngIf="name.errors?.minlength">姓名最小长度为3</p> <p *ngIf="name.errors?.required">必须输入姓名</p> </div>
首先，我们在input上添加了2个验证，required和minlength="3"。
其次，我们使用#name="ngModel"创建了一个模板引用变量，这样我们在下面就可以使用name来获取这个表单控件（FormControl）的引用。表单控件有一些属性，如pristine, dirty, valid, touched，这几个都是状态类型，表示某一种状态是否为真。除此以外还有控件的值可以用name.value获取。最后，还有验证的错误信息结果，会放在name.errors里。
在上面的代码里，我们用<span *ngIf="name.pristine">未修改</span>，在控件值未被修改的时候，显示一个lebel。同样，在被修改、验证有效的时候显示相应的标签。
最后，所有的验证结果的错误信息会保存在name.errors里，如果没有数据验证错误，这个errors值就是null，所以，在上面的代码里，我们用name.errors?.minlength，这表示，如果errors不为null，而且errors.minlength也不为空的时候，才显示里面的信息。
我们可以看到，表单控件的验证会将验证器的名字作为key放在errors里面，对应的值是true。我们就是用这个特性，来根据控件验证的不同结果，来显示友好的错误信息。
如果运行我们的实例，可以发现，对于姓名，如果清空它的值，发现只有一个错误信息，就是必须输入姓名。你可能会觉得，这时候，值为空，那他的长度也小于3，那么minlength这个错误也应该被检测到才对，但是实际上，遇到第一个错误以后，就没有其他的验证。
在上面姓名输入框上，我们使用#name="ngModel"创建了一个模板引用变量，然后在接下来的模板里面使用它获得表单控件。实际上，我们也可以直接使用之前定义的对ngForm的引用，来获得这个表单里所有控件的状态。例如，对电话，我们使用下面的方式：
<input type="text" [ngModel]="user.mobile" required minlength="11" maxlength="11"> <span *ngIf="userForm.controls.mobile?.pristine">未修改</span> <span *ngIf="userForm.controls.mobile?.dirty">已修改</span> <span *ngIf="userForm.controls.mobile?.valid">有效</span> <div [hidden]="userForm.controls.mobile?.valid || userForm.controls.mobile?.pristine"> <p *ngIf="userForm.controls.mobile?.errors?.minlength">电话长度必须为11</p> <p *ngIf="userForm.controls.mobile?.errors?.required">必须输入电话</p> </div>
在这里，我们没有获取对mobile的模板引用，而是用ngForm的引用获得：
userForm.controls.mobile?.pristine
当获取验证错误结果时:
userForm.controls.mobile?.errors?.minlength
注意这里在mobile上就使用?是因为，在使用ngIf渲染页面上的元素的时候，这个表单控件还没有初始化完成，如果不加这个?，就会出现错误。
根据验证状态定义样式
Angular的表单验证，除了在控件上的数据以外，它还会根据状态在控件所在的html元素上添加css样式：
所以，我们只需要定义相关的css，就可以实现根据状态显示不同的效果。
.ng-valid[required], .ng-valid.required { border-left: 5px solid #42A948; /* green */ } .ng-invalid:not(form).ng-invalid:not(fieldset) { border-left: 5px solid #a94442; /* red */ }
结合各种css的选择器，我们就可以根据表单控件的状态实现各种显示的样式。
在组件中获取表单控件数据
最后，我们再看看怎样在组件中获取这些控件的状态和结果，在上面，我们给ngForm添加了一个提交方法:
<form #userForm="ngForm" (ngSubmit)="logForm(userForm)" novalidate>
然后在组件中，这个logForm(userForm)方法如下：