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

<header [ ]=\" \"></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;