はじめに
以下のポストでAngular（Material)の初心者用プロジェクトを作った。
Angular スターターキットを作った
https://qiita.com/shinno21/items/b072e48d28f2ee7d34d9
発展編その１として、もともと簡単な一覧画面しかなかったこのプロジェクトに、登録画面を追加してみた。
登録画面の追加コミット
以下の通り、コードを追加している
Angular
https://github.com/shinno21/sk-app/commit/28df4808312f832098dc869a907939fab66ebaa6
Django Restframework
https://github.com/shinno21/drf_sample/commit/6822ade6ab8c9811cedea47a14ba7169b4fdf4de
解説
以下の手順でコードを追加している
- Angular CLIで登録画面として使うコンポーネントのテンプレートを追加
- app-routing.module.ts に登録画面のURLを追加
- app.module.ts に必要なコンポーネントを追加
- 登録画面の実装を行う
- その他
Angular CLIで登録画面として使うコンポーネントのテンプレートを追加
> ng g component components/sample/sample-reg
Angular的には１画面 = １コンポーネントでは必ずしもないのだが、あまり細切れにコンポーネント分割しても良いことはないので、基本的にはそうしている。
- src/app/components/sample/sample-reg/ 以下にhtml, css, ts, spec.ts のセットが作られる
ここでは登録画面用のコンポーネントを追加。
(参考)Angular CLIの generate
app-routing.module.ts に登録画面のURLを追加
app.module.ts に必要なコンポーネントを追加
以下の変更を加える。
今回はカレンダー入力とプルダウン入力のUIを使うので、Angular Materialからコンポーネントを追加する。（MatNativeDateModule, MatDatepickerModule, MatSelectModuleの辺りのコード）
https://github.com/shinno21/sk-app/commit/28df4808312f832098dc869a907939fab66ebaa6#diff-fc6b22833aeaf77f8440c4970ade705e
(参考)Angular Material のコンポーネント利用方法
自分が利用したいコンポーネントを見つける。
公式サイト参照。このあたりに利用出来るコンポーネントが書いてあります。
https://material.angular.io/components/categories
利用したいコンポーネントをプロジェクトに適用する
公式サイトのこの辺にやり方が載っています。
https://material.angular.io/guide/getting-started#display-a-component
登録画面の実装を行う
今回は画面のレイアウトは特に気にしない。テストも作らないので、htmlとtsの実装のみ。
登録用のAPIを呼び出すのに、既存のServiceクラスに登録用のメソッドを追加。
その他
HTTP Headerに入力する値を定数として設定。
Postクラスの作成日属性の変数名をAPI側と合わせる修正を加えた。
また、API側にAngular画面から渡される日付フォーマットの形式を考慮した修正を加えた（blackというフォーマッターのせいで不要な部分の変更も入っているが）