【Angular-Material】10分で分かるInputの使い方

1
【Angular-Material】10分で分かるInputの使い方


原田です。今回はInputについて解説を行います。

ソースコードはGitHubで公開しています。

AngularMaterialの環境構築については、こちらを参照してください。
http://issier.com/archives/17#



スポンサーリンク




サンプル

Inputを利用するには、以下のモジュール、プロバイダーが必要です。

  • モジュール
    • FormsModule ・・・ @angular/forms
    • ReactiveFormsModule ・・・ @angular/forms
    • ReactiveFormsModule ・・・ @angular/forms
    • MdInputModule ・・・ @angular/material
  • プロバイダー
    • MD_PLACEHOLDER_GLOBAL_OPTIONS ・・・ @angular/material

ソースコード


https://gist.github.com/shinji5761/3aaa5e97c0e63e90662a6c3b2d317cc0

ソースコード解説

MdInputModuleは、かなり多くの機能が提供されます。1つ1つ、確認しようと思います。

md-container

まず、md-containerについてです。入力フォームの一塊を表します。中にはinputタグの他に、md-hintやmd-errorなどを含めます。

mdInput

inputタグにmdInputディレクティブを指定すると、マテリアルデザインの入力フォームが生成されます。

md-hint

入力フォームの下に、小さな文字を表示します。

md-error

ngIfの条件に該当した場合、エラーメッセージを表示します。入力フォームの色も赤くなります。

mdPrefix

入力フォームの先頭に表示します。(文字やアイコンなど)

mdSuffix

入力フォームの後方に表示するものを指定できます。(文字やアイコンなど)

placeholderの挙動

入力フォームのplaceholderは、設定によって挙動を変化させることができる。app.module.tsのprovidersに以下のように設定する。

app.module.ts
<br />
	providers: [<br />
		{provide: MD_PLACEHOLDER_GLOBAL_OPTIONS, useValue: { float: 'auto' }}<br />
	],<br />
placeholderの挙動について

float 概要
auto 入力がない場合は大きめの文字列で、ある場合は左上に小さめの文字列で表示される。
always 常に左上に小さめの文字列で表示される。
never 入力がない場合は大きめの文字列で表示する。

まとめ

Inputについて解説しました。いくつかMaterialと言うよりは、Angularの機能を使っているところがある。(FormControlとか)

そういったものは、別途記事にしようと思います。


スポンサーリンク




コメントを残す