test(text-input): updated test for form-inputs

references #678

ionic/components/text-input/test/form-inputs/index.ts

@@ -8,15 +8,20 @@ import {FormBuilder, Validators} from 'angular2/angular2';
 class E2EApp {
   constructor(fb: FormBuilder) {
     this.loginForm = fb.group({
-      username: ["", Validators.required],
       email: ["", Validators.required],
+      username: [""],
       password: ["", Validators.required],
       comments: ["", Validators.required]
     });
+
+    this.login = {};
+
+    this.submitted = false;
   }
 
   submit(ev) {
     console.log("Submitted", this.loginForm.value);
+    this.submitted = true;
   }
 
 }

ionic/components/text-input/test/form-inputs/main.html

@@ -4,12 +4,12 @@
 
 <ion-content>
 
-  <form (ng-submit)="submit($event)" [ng-form-model]="loginForm">
+  <form (ng-submit)="submit($event)" [ng-form-model]="loginForm" #mf="form" novalidate>
 
     <ion-list>
       <ion-input>
         <ion-label>Email:</ion-label>
-        <input ng-control="email" type="email">
+        <input [(ng-model)]="login.email" ng-control="email" type="email" placeholder="Required" required>
         <button clear item-right>
           <icon mail></icon>
         </button>
@@ -17,7 +17,7 @@
 
       <ion-input>
         <ion-label>Username:</ion-label>
-        <input ng-control="username" type="text">
+        <input [(ng-model)]="login.username" ng-control="username" type="text" placeholder="Optional">
         <button clear item-right>
           <icon person></icon>
         </button>
@@ -25,7 +25,7 @@
 
       <ion-input>
         <ion-label>Password:</ion-label>
-        <input ng-control="password" type="password">
+        <input [(ng-model)]="login.password" ng-control="password" type="password" placeholder="Required" required>
         <button clear item-right>
           <icon lock></icon>
         </button>
@@ -33,11 +33,26 @@
 
       <ion-input>
         <ion-label>Comments:</ion-label>
-        <textarea ng-control="comments">Comment value</textarea>
+        <textarea [(ng-model)]="login.comments" ng-control="comments" placeholder="Required" required>Comment value</textarea>
       </ion-input>
+
+      <ion-item [hidden]="submitted == false || mf.form.valid">
+        <p danger>Form is Invalid</p>
+      </ion-item>
     </ion-list>
 
-    <button block type="submit">Login</button>
+    <div padding>
+      <button block type="submit">Login</button>
+    </div>
+
+    <div [hidden]="submitted == false" padding-left>
+      <b>Valid form?:</b> {{ mf.form.valid }}<br>
+      <b>Submitted form?:</b> {{ submitted }}<br>
+      <b>Email:</b> {{ login.email }}<br>
+      <b>Username:</b> {{ login.username }}<br>
+      <b>Password:</b> {{ login.password }}<br>
+      <b>Comments:</b> {{ login.comments }}
+    </div>
 
   </form>