Ionic 2基礎知識のユーザー入力

多くの場合、ユーザー名、パスワード、出荷先住所、検索キーワードなど、ユーザーからデータを収集する必要があります.この場合、ユーザーはテンプレートページに入力する必要があります.ここでは,ユーザ入力を処理する2つの方法を学習する.
[(ngModel)]を使用した双方向データバインド
1.プロジェクトを新規作成し、次のコマンドを実行します:ionic start user_input blank --v2 --skip-npm 2.プロジェクトディレクトリuser_に進みます.inputでは、インストールに必要な依存度:cnpm install 3.src/pages/home/home.htmlテンプレートファイルを変更し、入力ボックスとコミットボタンを追加します.コードは次のように参照されます.

4.src/pages/home/home.tsクラスファイルを修正し、logInput()関数を追加し、ユーザーの入力を取得します.コードは以下の通りです.

import { Component } from '@angular/core';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  myInput:string;
  constructor() {}
  logInput(){
     console.log(this.myInput);
  }
}

Form Builderを使用して複数のユーザー入力を一度に処理
Form BuilderはAngular 2が提供するサービスです.これを使用すると、複数の入力を一度に処理でき、ユーザーが入力したEmailアドレスが正当かどうかを確認するなど、ユーザー入力を検証できます.1.home.htmlテンプレートファイルを変更し、formフォームを追加します.コードは以下の通りです.

  
    
          
    
  


  

    
       Field 1
       
    
    
       Field 2
       
    
    
       Field 3
       
    
      
  

2.home.tsクラスファイルを修正し、フォームを初期化し、ユーザーが提出したデータを受信する.コードは以下の通りである.

import { Component } from '@angular/core';
import { FormBuilder,FormGroup,Validators } from '@angular/forms';
@Component({
  selector: 'page-home',
  templateUrl: 'home.html'
})
export class HomePage {
  public myForm:FormGroup;
  constructor(public formBuilder:FormBuilder) {
     this.myForm=this.formBuilder.group({
         field1:['',Validators.required],
         field2:[''],
         field3:['']
     });
  }
  saveForm(event){
    event.preventDefault();
    console.log(this.myForm.value);
  }
}