Angular(Ionic)で相方向バインディングを行う最低限のテンプレート

概要

• リアクティブフォーム はより堅牢です。よりスケーラブルで、再利用しやすく、そしてテストがしやすいです。フォームがアプリケーションの重要なパーツである場合、またはアプリケーションの構築にリアクティブパターンをすでに使用している場合は、リアクティブフォームを使用してください。
• テンプレート駆動フォーム は、メーリングリストの申し込みフォームなどの単純なフォームをアプリに追加するのに役立ちます。アプリに追加するのは簡単ですが、リアクティブフォームほどスケーラビリティはありません。テンプレートでのみ管理できるとても基本的なフォーム要件とロジックをもつような場合は、テンプレート駆動フォームを使用してください。

最低限のリアクティブフォーム

import { NgModule } from '@angular/core';
import { CommonModule } from '@angular/common';
import { FormsModule, ReactiveFormsModule } from '@angular/forms';
import { IonicModule } from '@ionic/angular';
import { Tab1p5PageRoutingModule } from './tab1p5-routing.module';
import { Tab1p5Page } from './tab1p5.page';

@NgModule({
  imports: [
    CommonModule,
    FormsModule,
    IonicModule,
    Tab1p5PageRoutingModule,
    ReactiveFormsModule
  ],
  declarations: [Tab1p5Page]
})
export class Tab1p5PageModule {}

import { Component, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-tab1p5',
  templateUrl: './tab1p5.page.html',
  styleUrls: ['./tab1p5.page.scss'],
})
export class Tab1p5Page implements OnInit {
  favoriteColorControl:formControl;

  constructor() { }

  ngOnInit() {
    this.favoriteColorControl = new FormControl('');
  }

}

<ion-header>
  <ion-toolbar>
    <ion-title>tab1p5</ion-title>
  </ion-toolbar>
</ion-header>

<ion-content>
  Favorite Color: <input type="text" [formControl]="favoriteColorControl">
{{favoriteColorControl.value}}
</ion-content>