ionic のスニペット集

    this.navCtrl.push('ContactPage');

// app.module.ts のコード先頭付近に追加
import { LoginPageModule } from '../pages/login/login.module';

// app.module.ts の imports 内それぞれに追加
    LoginPageModule,

// app.module.ts のコード先頭付近に追加
import { LoginPage } from '../pages/login/login';

// app.module.ts の declarations, entryComponents 内それぞれに追加
    LoginPage,

Error: Type LoginPage in /path/to/src/pages/login/login.ts is part of the declarations of 2 modules: AppModule in /path/to/src/app/app.module.ts and LoginPageModule in/path/to/src/pages/login/login.module.ts! 

Please consider moving LoginPage in /path/to/src/pages/login/login.ts to a higher module that imports AppModule in /path/to/src/app/app.module.ts and LoginPageModule in /path/to/src/pages/login/login.module.ts. 

You can also create a new NgModule that exports and includes LoginPage in /path/to/src/pages/login/login.ts then import that NgModule in AppModule in /path/to/src/app/app.module.ts and LoginPageModule in /path/to/src/pages/login/login.module.ts.

エラー: 型 LoginPage (/path/to/src/pages/login/login.ts) は2つのモジュールの宣言の一部になっています。(AppModule (/path/to/src/app/app.module.ts) と LoginPageModule (/path/to/src/pages/login/login.module.ts))

LoginPage (/path/to/src/pages/login/login.ts) を、AppModule (/path/to/src/app/app.module.ts) と LoginPageModule (/path/to/src/pages/login/login.module.ts) をインポートする上位モジュールに移動することを検討してください。

LoginPage (/path/to/src/pages/login/login.ts) をエクスポート、インクルードする新しい NgModule を生成し、その NgModule を AppModule (/path/to/src/app/app.module.ts) と LoginPageModule (/path/to/src/pages/login/login.module.ts) にインポートすることもできます。

// ページの .ts のコード先頭付近に追加
import { NavController } from 'ionic-angular';

// constructor() の引数に追加
    public navCtrl: NavController,

// 使用したい場所に追加
    this.navCtrl.push('ContactPage');
    // this.navCtrl.create(ContactPage, { foo: 1 }); (開くページにデータを渡したい場合)

// ナビゲーションで開くページの .ts のコード先頭付近に追加
import { NavParams } from 'ionic-angular';

// ナビゲーションで開くページの constructor() の引数に追加
    public navParams: NavParams,

// ナビゲーションで開くページ側のデータを取得したい箇所に追加
    const foo = this.navParams.get('foo'); // this.navCtrl.push(ContactPage, { foo: 1 }); などで渡したデータのキーを指定

// ナビゲーションで開くページの .ts のコード先頭付近に追加
import { NavController } from 'ionic-angular';

// ナビゲーションで開くページの constructor() の引数に追加
    public navCtrl: NavController,

// ナビゲーションで開くページ側の閉じたい場所に追加
    this.navCtrl.pop();

// ナビゲーションで開くページ側の閉じたい場所に追加 (開くページにデータを渡したい場合。push() 時にコールバック関数を渡しておく)
    this.navCtrl.pop(null, () => {
      const callback = this.navParams.get('callback');
      if (callback) {
        callback({ foo: 2 });
      }
    });

// ページの .ts のコード先頭付近に追加
import { AlertController } from 'ionic-angular';

// constructor() の引数に追加
    public alertCtrl: AlertController,

// 使用したい場所に追加
    const alert = this.alertCtrl.create({
      title: 'タイトル',
      message: 'メッセージです。',
      buttons: ['OK']
    });
    alert.present();

// ページの .ts のコード先頭付近に追加
import { ModalController } from 'ionic-angular';

// ページの constructor() の引数に追加
    public modalCtrl: ModalController,

// 使用したい場所に追加
    const modal = this.modalCtrl.create('ContactPage'); // Pageを指定してモーダルを表示
    // const modal = this.modalCtrl.create(ContactPage, { foo: 1 }); (開くページにデータを渡したい場合)
    modal.onDidDismiss(() => {
      // モーダルが閉じられたときの処理
    });
    modal.present();

// モーダルで開くページの .ts のコード先頭付近に追加
import { NavParams } from 'ionic-angular';

// モーダルで開くページの constructor() の引数に追加
    public navParams: NavParams,

// モーダルで開くページ側のデータを取得したい箇所に追加
    const foo = this.navParams.get('foo'); // this.modalCtrl.create(ContactPage, { foo: 1 }); などで渡したデータのキーを指定

// モーダルで開くページの .ts のコード先頭付近に追加
import { ViewController } from 'ionic-angular';

// モーダルで開くページの constructor() の引数に追加
    public viewCtrl: ViewController,

// モーダルで開くページ側の閉じたい場所に追加
    this.viewCtrl.dismiss();
    // this.viewCtrl.dismiss({ foo: 2 }); // 元のページにデータを渡したい場合 (modal.onDismiss((data) => {}); で受け取り)

// ページ等の .ts のコード先頭付近に追加
import { LoadingController } from 'ionic-angular';

// ページの constructor() の引数に追加
    public loadingCtrl: LoadingController,

// 使用したい場所に追加
    const loading = this.loadingCtrl.create({
      content: 'テスト',
      duration: 4000
    });
    loading.present();

<!-- ページの .html に追加 -->
  <form [formGroup]="form" (ngSubmit)="submit()">
    <ion-list>
      <ion-item>
        <ion-label>氏名</ion-label>
        <ion-input formControlName="name"></ion-input>
      </ion-item>
      <div ion-text class="error" no-lines *ngIf="errors.name">{{errors.name}}</div>

      <ion-item>
        <ion-label>メールアドレス</ion-label>
        <ion-input formControlName="email"></ion-input>
      </ion-item>
      <div ion-text class="error" no-lines *ngIf="errors.email">{{errors.email}}</div>

      <ion-item>
        <ion-label>情報を記憶する</ion-label>
        <ion-checkbox formControlName="save"></ion-checkbox>
      </ion-item>
      <div ion-text class="error" no-lines *ngIf="errors.save">{{errors.save}}</div>

    </ion-list>
    <button ion-button type="submit" block>送信</button>
  </form>

/* app.scss に追加 (エラーテキストのスタイル) */
div.error {
  margin-left: 20px;
  color: red;
}

// ページの .ts のコード先頭付近に追加
import { FormGroup, FormBuilder, Validators, FormControl } from '@angular/forms';

// ページのクラスのメンバ変数として追加

  /** フォーム項目 */
  form: FormGroup;
  /** フォーム項目のエラーテキスト */
  errors = {};
  /** フォーム項目名 */
  controlNames = {
    name: "氏名",
    email: "メールアドレス",
    save: "情報を記憶する"
  };

// ページの constructor() の引数に追加
    public formBuilder: FormBuilder,

// ページの constructor() 内に追加
    this.form = this.formBuilder.group({
      // 項目名: [初期値, ルール]
      name: ["", Validators.required],
      email: ["", [ Validators.required, Validators.email ]],
      save: [false],
    });

// ページクラス内に追加

  /**
   * 送信処理を行います。
   */
  submit() {
    // グループ内のどれかがエラーの場合
    if (!this.form.valid) {
      for (const field of Object.keys(this.form.controls)) {
        this.errors[field] = '';
        const control = this.form.get(field);    
        // 項目ごとに入力エラーがあればエラーメッセージをセット
        if (!control.valid) {
          // 必須チェックがエラーの場合
          if (control.errors.required) {
            this.errors[field] = this.controlNames[field] + "を入力してください。";
          }
          else if (control.errors.email) {
            this.errors[field] = this.controlNames[field] + "はメールアドレスの形式にしてください。";
          }
          // TODO その他
        }
      }
      return;
    }
    // TODO 入力チェック後の処理
  }

// あとから値をセットする場合
    this.form.setValue({
      name: 'test',
      email: 'test@example.com',
      save: true
    });

// あとから一部の項目のみ値をセットする場合
    this.form.patchValue({
      name: 'test'
    });