ionicを試す 5日目 文字列をユーザーが変更する
前回は、プログラムがセットした文字列を表示させました。
次はユーザの入力により文字列の変更を行ってみます。
まず、コマンドプロンプトを起動して以下の２つのコマンド入力してください。
(すでに起動しているならば不要です)
------------------------------------------
"cd c:\MyTest\test000"
"ionic serve"
------------------------------------------
続けてVisualStudioCodeで"c:\MyTest\test000"フォルダを開いて下さい。
今回変更するのは"src\app\home\home.page.html"のみです。
文字列を入力するためのInputBoxを画面に追加します。
せっかくですので、デザインに定評のあるionicコンポーネントのInputBoxと通常のInputBoxの両方を使用したいと思います。
以下にソースコードを示します。
---------------------------------------------------------------
<ion-content [fullscreen]="true">
<div id="container">
<!--表示文字列-->
<p>{{dispText}}</p>
<!--ionicコンポーネントのインプットボックス-->
<ion-item fill="outline">
<ion-input autofocus="true" [(ngModel)] = "dispText"></ion-input>
</ion-item>
<!--通常のインプットボックス-->
<input [(ngModel)] = "dispText">
</div>
</ion-content>
---------------------------------------------------------------
ionicコンポーネントは色々機能はあるのですが、その分、慣れるのに時間がかかるかも？
通常のインプットボックスは、安心感の代わりに若干やぼったいかもしれませんね。
さて、ユーザの入力です。
どちらのインプットボックスにも同じ記述があるのにお気づきでしょうか？
---------------------
[(ngModel)] = "dispText"
---------------------
この記述は、angularの機能の一つで双方向バインディングです。
Angular 日本語ドキュメンテーション-双方向バインディング
https://angular.jp/guide/two-way-binding
"dispText"は、前回"src\app\home\home.page.ts"で定義した変数ですね。
ソースコードを保存して、ブラウザアプリを更新しましょう。
(ソースコードを保存するだけでアプリは更新されます)
"src\app\home\home.page.ts"内のコンストラクタで"dispText"にセットした内容が、3か所に表示されています。
（<p>タグ内と2つのインプットボックスの3か所)
コンストラクタ内のセット記述
------------------------------------------
//表示文字列のセット
this.dispText = 'プログラムからセット';
------------------------------------------
ここで、どちらかのインプットボックスの記述を変更してみてください。
1か所変更するだけで、3か所とも同じ記述になるのが判ると思います。
これは単純な例ですが、Angularには便利で強力な機能があり、それを取りまとめてモバイルアプリへの筋道をつけるionicは使えるツールだと理解して頂けたと思います。
最後に、使い方の一例を紹介します。
2つ目の通常インプットボックスの記述の下に、以下のコードを追加してください。
------------------------------------------
<!--エラーメッセージ-->
<p *ngIf="dispText.length==0">未入力です！</p>
------------------------------------------
セーブしてブラウザアプリを更新してください。
この状態ではエラーメッセージは表示されませんが、どちらかのインプットボックスの中の文字を削除すると・・・
大きな文字で”未入力です！”と表示されました。
(dispTextの文字数が0ならば、エラーメッセージを表示するというコードです)
今回はここまで
