ionic使用angularjs表单验证（模板验证）

<header [title]="title"></header> <ion-content scroll="false"> <!--<form>-->  <ion-item>  <ion-input type="text" class="form-control"     name="username" #username="ngModel"     required maxlength="10" minlength="6"     placeholder="用户名"     [(ngModel)]="user.username"     ></ion-input>  </ion-item>  <p>ahdasidhasidashdudi</p>  <ion-item>  <ion-input type="password" class="form-control"     name="password" #password="ngModel"     required maxlength="16" minlength="6"     placeholder="密码" [(ngModel)]="user.password"></ion-input>  </ion-item>  <ion-item>  <ion-label>记住密码</ion-label>  <ion-toggle [(ngModel)]="pepperoni"></ion-toggle>  </ion-item>  <button ion-button block (click)="login()">登录</button>  <ion-item>  <button ion-button icon-start outline (click)="goRegistered()">   去注册  </button>  <button ion-button icon-end outline>   忘记密码  </button>  </ion-item>  <h1 class="errorMessage">{{promptMessage}}</h1>  <span *ngIf="username.invalid && (username.dirty || username.touched)"   class="errorMessage">用户名必须为6到10位</span>  <span *ngIf="password.invalid && (password.dirty || password.touched)" class="errorMessage">  密码必须为6-16位  </span> <!--</form>--> </ion-content>

/**  * A control is `valid` when its `status === VALID`.  *  * In order to have this status, the control must have passed all its  * validation checks.  */ readonly valid: boolean; /**  * A control is `invalid` when its `status === INVALID`.  *  * In order to have this status, the control must have failed  * at least one of its validation checks.  */ readonly invalid: boolean;

 /**  * A control is `dirty` if the user has changed the value  * in the UI.  *  * Note that programmatic changes to a control's value will  * *not* mark it dirty.  */ readonly dirty: boolean; /** * A control is marked `touched` once the user has triggered * a `blur` event on it.  */ readonly touched: boolean;