Angular2 表单验证

1.实现双向数据绑定：

<div class="label">
   <label>测试一：
      <input type="text" [(ngModel)]='str' >
      <span>{{str}}</span>
   </label>
</div>

2.添加简单的验证功能：

       目前 Angular 支持的内建 validators（验证器）有如下五种；

（1）required - 设置表单控件值时非空的；

（2）email - 设置表单控件值的格式是 email；

（3）minlength - 设置表单控件值的最小长度；

（4）maxlength - 设置表单控件值的最大长度；

（5）Angular 提供两种验证方式：valid（是否正确），errors（错误）

（6）示例（#名称='ngModel'必须要加）：

<div class="label">
   <label>测试一：
      <input type="text" [(ngModel)]='str' required #user='ngModel'>
      <span>{{user.valid}}</span>
   </label>
</div>

                    

3.添加聚焦事件：

<div class="label">
   <label>测试一：
      <input type="text" [(ngModel)]='str' required #user='ngModel' (focus)='onFocus()'>
      <span>{{name}}</span>
   </label>
</div>

//ts文件
name = '';
onFocus(){
    this.name = '字段不能为空'
}

                        

4.添加验证失败的错误信息：

<div class="label">
   <label>测试一：
      <input type="text" [(ngModel)]='str' required minlength='6' maxlength='9' #user='ngModel' (focus)='onFocus()'>
      <span *ngIf='user.errors?.required'>{{name}}</span>
      <span *ngIf='user.errors?.minlength'>请输入6到9位的字段</span>
   </label>
</div>

//ts文件
name = '';
onFocus(){
    this.name = '字段不能为空'
}