mirror of
https://github.com/ionic-team/ionic-framework.git
synced 2025-08-21 21:15:24 +08:00
118 lines
3.6 KiB
HTML
118 lines
3.6 KiB
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>Password</ion-label>
|
|
<ion-input [(ngModel)]="login.password" ngControl="password" type="password" required></ion-input>
|
|
</ion-item>
|
|
|
|
<ion-item clearInput>
|
|
<ion-label>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-input placeholder="Stand-alone ion-input"></ion-input>
|
|
|
|
<ion-input placeholder="Stand-alone textarea"></ion-input>
|
|
|
|
<ion-list>
|
|
<ion-item>
|
|
<ion-label>Custom Attrs</ion-label>
|
|
<ion-input autocomplete="off"
|
|
spellcheck="no"
|
|
required
|
|
some-weird-attr="value"
|
|
accept="sure"
|
|
class="no-copy" id="no-copy" checked=checked
|
|
value="copy custom attributes"></ion-input>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-label>Disabled Input</ion-label>
|
|
<ion-input disabled value="Value"></ion-input>
|
|
</ion-item>
|
|
|
|
<ion-item>
|
|
<ion-label>Disabled TextArea</ion-label>
|
|
<ion-textarea [disabled]="isTextAreaDisabled" value="Value"></ion-textarea>
|
|
</ion-item>
|
|
</ion-list>
|
|
|
|
<button (click)="disable()">Disable</button>
|
|
|
|
</ion-content>
|