Angular フォーム

今回はAngularのフォーム(テンプレート駆動フォーム)をやります。サンプルとしてログイン画面のようなものを作ります。名前とパスワードが等しければ
ログインOK。等しくなければログインNGとします。

実際のサーバアクセスやページ遷移は今後にやるので今回はなしです。

Angular CLIの続きからやるので、環境がない場合、そちらを参考に環境構築してください。

ソースファイル

src\app\loginModel.ts

ログインに使用するモデルクラスを新規に作成します。

				
export class LoginModel {
    constructor(
        public loginId: string,
        public password: string,
        public message?: string
    ) { }
}

messageにクエスチョンマーク(?)を付けていますが、これはオプションであることを表しています。オプションなので、呼び出し元では省略できます。

src\app\app.component.ts

コンポーネントにログインの処理を追加します。名前とパスワードが一致した場合、ログイン成功としています。

				
import { Component } from '@angular/core';
import { LoginModel } from './loginModel';
@Component({
  selector: 'app-root',
  templateUrl: './app.component.html'
})
export class AppComponent {
  model = new LoginModel('', '');

  onSubmit() {
    if (this.model.loginId == this.model.password) {
      this.model.message = "ログインしました";
      this.model.loginId = "---";
      this.model.password = "---";
    } else {
      this.model.message = "ログインに失敗しました";
    }
  }
}

src\app\app.component.html

画面は自動生成されているHTMLファイルの中身を書き直します。

				
<div class="container">
  <h1>Login</h1>
  <form (ngSubmit)="onSubmit()" #loginForm="ngForm">
    <table>
      <tr>
        <td><label for="id">名前</label></td>
        <td><input type="text" id="id" required [(ngModel)]="model.loginId" name="idName" #idValid="ngModel">
          <span [hidden]="idValid.valid || idValid.pristine">
            名前を入力して下さい。
          </span>
        </td>
      </tr>
      <tr>
        <td><label for="password">パスワード</label></td>
        <td><input type="text" id="password" required [(ngModel)]="model.password" name="passName" #passValid="ngModel">
          <span [hidden]="passValid.valid || passValid.pristine">
            パスワードを入力して下さい。
          </span>
        </td>
      </tr>
    </table>
    <button type="submit" [disabled]="!loginForm.form.valid">ログイン</button>
    <br /> {{model.message}}
  </form>
</div>

src\app\app.module.ts

テンプレート駆動フォームを使用するので@NgModuleにFormsModuleを追加します

				
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';

import { AppComponent } from './app.component';

@NgModule({
  declarations: [
    AppComponent
  ],
  imports: [
    BrowserModule,
    FormsModule
  ],
  providers: [],
  bootstrap: [AppComponent]
})
export class AppModule { }

実行

上記変更後、プロジェクトフォルダで以下を実行すると動作確認できます。

				
ng serve --open

実行イメージ

ページのトップへ戻る