ionicでフォームを作る方法2

Question

ionic/angular 2を試したいと思います。フォームを作成する方法を理解できません。これどうやってするの？

Answer 1

まず、簡単なログインフォームの作成を想定します。

• 形式：

  • （入力）ユーザ名

  • （入力）パスワード

  • （ボタン）ログイン

あなたの.htmlファイル：あなたの.jsで

 <form [ngFormModel]="loginForm" (submit)="login($event)"> 
      <ion-input stacked-label> 
       <ion-label>Username</ion-label> 
       <input type="text" ngControl="username"> 
      </ion-input> 

      <ion-input stacked-label> 
       <ion-label>Password</ion-label> 
       <input type="password" ngControl="password"> 
      </ion-input> 

      <div padding> 
       <button block type="submit" [disabled]="!loginForm.valid">Login</button> 
      </div> 
     </form> 

ファイル：

import {FormBuilder, Validators} from 'angular2/common'; 

export class LoginPage { 

    constructor(form: FormBuilder) { 
    // Create a new form group 
    this.loginForm = form.group({ // name should match [ngFormModel] in your html 
     username: ["", Validators.required], // Setting fields as required 
     password: ["", Validators.required] 
    } 

    // This is called on form submit 
    login(event) { 
    console.log(this.loginForm.value) // {username: <usename>, password: <password> } 
    event.preventDefault(); 
    } 

} 

Reference