Angular 2 表单数据验证 - 学习 AngularJS 2

上一章节中我们已经学习了如何用把表单还没有和我们的模型进行绑定

我们还可以通过 ngModel 跟踪修改状态与有效性验证

我们使用了三个 CSS 类来更新控件，以便反映当前状态

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

现在我们添加自定义 CSS 来反应表单的状态

创建 angular2-forms/form.css 文件，复制以下内容

.ng-valid[required], .ng-valid.required  {
  border-left: 5px solid #42A948; /* green */
}

.ng-invalid:not(form)  {
  border-left: 5px solid #a94442; /* red */
}

然后修改 index.html 文件，把以下样式表

<link rel="stylesheet" href="form.css">

最后修改 app/site-form.component.html 为以下内容

<div class="container">
    <h1>网站表单</h1>
    <form>
      {{diagnostic}}
      <div class="form-group">
        <label for="name">网站名</label>
          <input type="text" class="form-control" id="name"
               required
               [(ngModel)]="model.name" name="name"
               #name="ngModel" >
        <div [hidden]="name.valid || name.pristine" 
             class="alert alert-danger">
          网站名是必需的
        </div>
      </div>
      <div class="form-group">
        <label for="alexa">alexa 排名</label>
         <input type="text"  class="form-control" id="alexa"
         [(ngModel)]="model.alexa" name="alexa">
      </div>
      <div class="form-group">
        <label for="url">网站 URL </label>
        <select class="form-control"  id="url"
                required
                [(ngModel)]="model.url" name="url">
          <option *ngFor="let p of urls" [value]="p">{{p}}</option>
        </select>
      </div>
      <button type="submit" class="btn btn-default">提交</button>
    </form>
</div>

通过把 div 元素的 hidden 属性绑定到 name 控件的属性，我们就可以控制 "name" 字段错误信息的可见性了

刷新浏览器，删除掉 name 字段的数据，演示如下