1
Formの場合はこちら
https://ionicframework.com/docs/v3/developer-resources/forms/
Note: If you use ngModel within a Form tag, you have to provide a name property. If you do not, you must set standalone to true in ngModelOptions
概要
Angularでは、相方向バインディングを行うための二つの方法があります。一つはテンプレート駆動型、もう一つはリアクティブフォールによるものです。
こちらの公式
https://angular.jp/guide/forms-overview
によると、
- リアクティブフォーム はより堅牢です。よりスケーラブルで、再利用しやすく、そしてテストがしやすいです。フォームがアプリケーションの重要なパーツである場合、またはアプリケーションの構築にリアクティブパターンをすでに使用している場合は、リアクティブフォームを使用してください。
- テンプレート駆動フォーム は、メーリングリストの申し込みフォームなどの単純なフォームをアプリに追加するのに役立ちます。アプリに追加するのは簡単ですが、リアクティブフォームほどスケーラビリティはありません。テンプレートでのみ管理できるとても基本的なフォーム要件とロジックをもつような場合は、テンプレート駆動フォームを使用してください。
ということです。
最低限のリアクティブフォーム
使いたいページのmodule、tsファイル、HTMLの3つに変更を加えます。
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>
