Angular(17.0)で作成したフォームを送信し、画面に表示する方法(チャットアプリを例題に)

目次

Angular(17.0)でフォームを送信し、画面に出力する方法

Angular(17.0)でフォームを送信し、画面に出力する方法として、 「ngModel」というディレクティブ（Angularの拡張機能のこと）を利用することで実装することができます。 今回は、簡易的なChatアプリを実装し、ユーザーが入力した値を画面上に表示していく手順を解説していきます。

動作環境

• ・Windows 10
• ・Angular 17.0
• ・AngularMaterial 17.0
• ・VScode

この記事の目標

この記事の目標として、入力フォームへ入力した値を画面に表示させることが目標です実装後の画面はこちら

ユーザ名とコメントを入力し、送信ボタンを押下することでチャットが追加されることを確認できると思います。

事前準備

事前準備として、Angularが動作すること、AngularMaterialをnpm上にインストールしてあることが前提です。 まだ完了していない方は、下の二つの手順を実施してください。

• ・Angularの環境構築の手順
• ・AngularMaterialのインストール手順

※マストではありませんが、コンポーネントを追加する手順も実施すると、 画面を作成していくイメージがつかめると思います。

コンポーネントの追加

まずはchatアプリのコンポーネントを作成を作成しましょう。 以下のコマンドをプロジェクトのルートディレクトリで実施し、 Chatアプリのコンポーネントを生成してください。

ng generate component chat

ルーティングの追加

次に、ルーティングの追加をしましょう。 今回は localhost:4200/chat とURLに打ち込むことで、chatアプリが表示されるような仕組みを実装します。

以下の2つのファイルを編集します。

・app.component.htmlの内容を以下と一致させてください。

<router-outlet />

・app.routes.tsの内容を以下と一致させてください。

import { Routes } from '@angular/router';
    import { HomeComponent } from './home/home.component';
    import { ChatComponent } from './chat/chat.component';
    
    export const routes: Routes = [
        { path: 'home', component: HomeComponent }
        ,{ path: 'chat', component: ChatComponent }
    ];
    

設定完了後、ng serveでサーバを起動し、以下の画面と同じ内容になっていればここまでの手順はOKです。

HTML、CSS、TSを実装する

次にChatアプリの見た目を整えていきます。 HTML、CSS、TSを編集します。

・app.component.tsの内容を以下と一致させてください。

import { Component } from '@angular/core';
    import { CommonModule } from '@angular/common';
    import { MatInputModule } from '@angular/material/input';
    import { MatFormFieldModule } from '@angular/material/form-field';
    import { FormsModule } from '@angular/forms';
    import { MatButtonModule } from '@angular/material/button';
    
    @Component({
      selector: 'app-chat',
      standalone: true,
      imports: [MatInputModule, MatFormFieldModule, FormsModule, MatButtonModule, CommonModule],
      templateUrl: './chat.component.html',
      styleUrl: './chat.component.css'
    })
    
    export class ChatComponent {
      content     = '';
      userName    = '';
    
      comments: { userName: string, content: string }[] = [
        { userName: 'hoge Taro',  content: '１つ目のコメント'},
        { userName: 'piyo Taro',  content: '２つ目のコメント'},
        { userName: 'foo Taro',   content: '３つ目のコメント'}
      ];
    
      setComment() {
        const newComment = { userName: this.userName, content:  this.content };
        this.comments.push(newComment);
      }
    }
    

・chat.component.htmlの内容を以下と一致させてください。

<div class="chat">
    <h1>チャットアプリ実装</h1>
    
    <ng-container *ngFor="let comment of comments"><!--追加-->
        <p>user : {{comment.userName}}</p>
        <p>messsage : {{comment.content}}</p>
        <br>
    </ng-container>
    
    <div class="">
        <form class="example-form" (submit)="setComment()">
            <mat-form-field class="example-full-width">
                <mat-label>ハンドルネーム</mat-label>
                <input matInput [(ngModel)]="userName" name="userName" placeholder="名前をいれてね">
            </mat-form-field>
    
            <mat-form-field class="mat-form-field">
                <mat-label>ここにコメントを記載してください</mat-label>
                <textarea matInput [(ngModel)]="content" name="content" placeholder="コメントしてね"></textarea>
            </mat-form-field>
    
            <button type="submit" mat-raised-button color="primary">送信</button>
        </form>
    </div>
    </div>

・chat.component.cssの内容を以下と一致させてください。

h1{
      padding-top: 15px;
  }
  
  .mat-form-field {
      width: 500px;
  }
  
  .example-full-width {
      width: 300px;
  }
  
  input {
      width: 300px;
  }
  
  .example-form {
      flex-direction: column;
      display: flex;
  }
  
  button {
      width: 100px;
      margin-bottom: 10px;
  }
  
  .chat {
      padding-left: 20px;
  }

サーバを起動

my-appディレクトリに移動します。

$ cd my-app

サーバーを起動します。 http://localhost:4200でブラウザからアクセスします。

C:\work\sample>cd my-app
C:\work\sample\my-app>
C:\work\sample\my-app>ng serve

Initial Chunk Files | Names         |  Raw Size
polyfills.js        | polyfills     |  83.46 kB |
main.js             | main          |  22.09 kB |
styles.css          | styles        |  95 bytes |

                    | Initial Total | 105.64 kB

Application bundle generation complete. [3.494 seconds]
Watch mode enabled. Watching for file changes...
  ➜  Local:   http://localhost:4200/
  ➜  press h + enter to show help
                        

http://localhost:4200/chat にアクセスし、画面にChatアプリの画面が表示されればOKです。

実際にハンドル名とコメントを記述し、送信ボタンを押下することでChatが追加されることを確認してみて下さい。

ソースコードの解説

HTMLファイル

HTMLファイルの11～23行目がポイントです。フォームタグの中にtextarea、input、buttonタグを実装しています。 ngModelディレクティブはinputタグ、textareaタグへ記述し、双方向バインディングを実装しています。 ハンドルネームの箇所を例にすると、画面に入力したユーザ名はTSファイルの「userName」変数と結びつき、 送信ボタンを押下した際に、TSファイルのuserName変数へ渡すことができるようになっています。

TSファイル

ngModelディレクティブを利用するために、FormsModuleのインポート宣言が必要です。(chat.component.ts 5行目)

送信ボタンを押下したときに,26行目のsetComment()メソッドが実行され、 HTMLファイルから送信されたデータは17,18行目の変数(content, userName)へ格納されます。 連想配列に格納し、commentsへ追加するような実装にしています。

CSSファイル

CSSファイルはボタンの大きさなどを整えています。詳細は割愛します。

課題

このチャットアプリは簡易的なものであるため、ブラウザの更新時や、 サーバを再起動させることで送信したチャットがなくなることが確認できると思います。 削除されないようにするために、フォームから送信したデータをデータベース上に登録するような仕組みを実装し、 表示するチャットを管理するとよいと思います。