Angular MaterialによるAddress Formの実現　(Angular7ベース）

# _Angular MaterialによるAddress Formの実現_  


ビデオ解説(日本語）
https://youtu.be/_egl9pbBNj8

ビデオ解説(英語）
https://youtu.be/S3XDkzdsdik


## 必要環境


Angular7においてAngular MaterialによってAddress Formを作成する方法についてご紹介いたします。



  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng7/ng7_material_address_form_12.png" width= "640" >



Address Formとは、ショッピング・サイトなどで購入を行う際に必ず必要となる、名前、住所などを入力するための定型的なフォームです。

Angular Materialを利用すると、そのひな型を簡単に作成することができます。

なお、以下の解説ではAngular7がシステムにインストールされている必要がありますので、まだインストールされていない方は、予めインストールしておいてください。

また、Angular7において、

`ng new [Project Name]`

で予め独自のプロジェクトを作成しておいてください。

--------------------

  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng7/ng7_material_address_form_01.png" width= "640" >


プロジェクトが生成されましたら、そのプロジェクト・ディレクトリに移動します。

ここでは、そのプロジェクトは_ng7MaterialAddressForm_です。

そして、`code .`と入力して、Visual Studio Codeを起動します。

--------------------

## Angular Materialのインストール


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng7/ng7_material_address_form_02.png" width= "640" >


VS Codeが起動しましたら、`Control + @` キーで、ターミナル・ウィンドウを開きます。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng7/ng7_material_address_form_03.png" width= "640" >


そして`ng add @angular/material`と入力して、Angular Materialをインストールします。

--------------------


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng7/ng7_material_address_form_04.png" width= "640" >


するとカラーの組み合わせのテーマに関する問い合わせがありますので、ここでは標準的な`indigo-pink`を選択します。

次に、HammerJSをセットするか否かの問い合わせがありますので、`y`を入力します。

最後にアニメーションを利用するか否かの問い合わせがありますので、`y`を入力します。

すると、`Package.json`ファイルなどの再編集が行われ、インストールが完了します。

--------------------

## Address Form の生成


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng7/ng7_material_address_form_05.png" width= "640" >


まず、ブラウザでAngular Material Schematics <https://material.angular.io/guide/schematics>のページを開きます。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng7/ng7_material_address_form_06.png" width= "640" >



そして_Address form schematic_セクションを表示し、そのコマンド行

`ng generate @angular/material:address-form <component-name>`

をコピーします。

--------------------


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng7/ng7_material_address_form_07.png" width= "640" >


VS Codeに戻り、コマンドラインに貼り付けます。

コンポーネント名は自分で適当に設定します。

ここでは`myaddress`というコンポーネント名にしました。

この生成はすぐ終わります。

--------------------


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng7/ng7_material_address_form_08.png" width= "640" >


ソースを確認すると、新たに`myaddress`ディレクトリが生成されているのがわかります。


--------------------

次にこのディレクトリの中の、`myaddress.component.ts`ファイルを開いて、セレクター名をコピーします。

ここでは、_app-myaddress_となっています。

--------------------



  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng7/ng7_material_address_form_09.png" width= "640" >


つぎに、`app.component.html`ファイルを開き、最下行にタグとしてペーストします。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng7/ng7_material_address_form_10.png" width= "640" >



さらにデフォルトのＨＴＭＬ文をすべてコメント・アウトします。

このファイルを保存します。

--------------------


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng7/ng7_material_address_form_11.png" width= "640" >


次に、ターミナル・ウィンドウで、`ng s -o`と入力して、ローカルサーバを起動し、ブラウザを開きます。

--------------------


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng7/ng7_material_address_form_12.png" width= "640" >


Shipping Informationページが表示されますので、企業名、氏名、住所など入力してみます。


  <img src="https://raw.githubusercontent.com/Ohtsu/images/master/ng7/ng7_material_address_form_13.png" width= "640" >



最後に_Submit_ボタンをクリックすると、ポップアップが表示されます。

Address Formのひな型が生成されました。

ＯＫです。

--------------------
　  

## Reference

- "Schematics", 
<https://material.angular.io/guide/schematics>

- "Angular Update Guide", 
<https://update.angular.io/>

- "Version 7 of Angular — CLI Prompts, Virtual Scroll, Drag and Drop and more", 
<https://blog.angular.io/version-7-of-angular-cli-prompts-virtual-scroll-drag-and-drop-and-more-c594e22e7b8c>


- "Angular5,Angular6,Angular7 Custom Library: Step-by-step guide", 
<https://www.udemy.com/angular5-custom-library-the-definitive-step-by-step-guide/>

- "Angular5,Angular6,Angular7用 カスタムライブラリの作成: 完全ステップ・バイ・ステップ・ガイド", 
<https://www.udemy.com/angular5-l/>