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

<ion-toolbar><ion-title>Form Inputs</ion-title></ion-toolbar>


<ion-content>

  <form [ngFormModel]="loginForm" #mf="ngForm" novalidate>

    <ion-list>
      <ion-item clearInput>
        <ion-label floating>Email</ion-label>
        <ion-input [(ngModel)]="login.email" ngControl="email" type="email" required></ion-input>
      </ion-item>

      <ion-item clearInput>
        <ion-label floating>Username</ion-label>
        <ion-input [(ngModel)]="login.username" ngControl="username"></ion-input>
      </ion-item>

      <ion-item clearInput>
        <ion-label floating>Password</ion-label>
        <ion-input [(ngModel)]="login.password" ngControl="password" type="password" required></ion-input>
      </ion-item>

      <ion-item clearInput>
        <ion-label floating>Comments</ion-label>
        <ion-textarea [(ngModel)]="login.comments" ngControl="comments" required>Comment value</ion-textarea>
      </ion-item>

      <div padding-left padding-right>
        <button block (click)="submit($event, login)">Login</button>
      </div>
      <div 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>
    </ion-list>
  </form>

  <form (ngSubmit)="submit($event, user)" #lf="ngForm">
    <ion-list>
      <ion-item clearInput>
        <ion-label floating>Username</ion-label>
        <ion-input [(ngModel)]="user.username" ngControl="username" required></ion-input>
      </ion-item>
      <ion-item clearInput>
        <ion-label floating>Password</ion-label>
        <ion-input type="password" [(ngModel)]="user.password" ngControl="password" required></ion-input>
      </ion-item>
      <div padding-left padding-right clearInput>
        <button block type="submit">Login</button>
      </div>
      <div padding-left>
        <b>Valid form?:</b> {{ lf.form.valid }}<br>
        <b>Submitted form?:</b> {{ submitted }}<br>
        <b>Username:</b> {{ user.username }}<br>
        <b>Password:</b> {{ user.password }}<br>
      </div>
    </ion-list>
  </form>

  <ion-list>
    <ion-item clearInput>
      <ion-label>Email</ion-label>
      <ion-input type="email" required></ion-input>
    </ion-item>

    <ion-item clearInput>
      <ion-label>Username</ion-label>
      <ion-input></ion-input>
    </ion-item>

    <ion-item clearInput>
      <ion-label>Password</ion-label>
      <ion-input type="password" required></ion-input>
    </ion-item>

    <ion-item clearInput>
      <ion-label>Comments</ion-label>
      <ion-textarea required>Comment value</ion-textarea>
    </ion-item>
  </ion-list>

</ion-content>