Angular2表单验证

Angular2中使用表单，首先要在from上添加 #forma=”ngForm”，这个是给from定义成了Angular的from对象

<form class="form-horizontal" #forma="ngForm" (ngSubmit)="onSubmit(showModal)">

下面的label中的for对应着input中的id值，input中要定义#ipt1=”ngModel”和required，下面的提示框是根据input的验证状态来实现显示或者隐藏。div中的itp1.valid对应的就是#ipt1所在的input中的状态，状态的值请看下面的状态表。提交按钮对应的是from表单的状态来实现是否可以按动

<form class="form-horizontal" #forma="ngForm" (ngSubmit)="onSubmit(showModal)">
 <div class="form-group">
   <label for="name" class="col-md-3 text-right">账号:</label>
   <div class="col-md-6">
      <input class="form-control" #ipt1="ngModel" [(ngModel)]="name" name="name"  id="name" required>
   </div>
   <div [hidden]="ipt1.valid || ipt1.pristine" class="alert alert-danger col-sm-6 col-sm-offset-1">账号是必须输入的</div>
</div>
<button type="submit" class="btn btn-default" [disabled]="!ngform.form.valid">提交</button>
</form>

状态     为真时的        CSS 类            为假时的 CSS 类
控件  已经被访问过      ng-touched         ng-untouched
控件  值已经变化        ng-dirty           ng-pristine
控件  值是有效的        ng-valid           ng-invalid

Diagnostic验证表单中数据的单词{{diagnostic}}在页面中可以使用这个来验证各种状态的值