トッカンソフトウェア

Angular 2 フォーム

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

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

前々回の作成したものをベースに一部を変更するので、実際動かす場合は、前々回のソースも作成して下さい。


ソースファイル

app\login.ts

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

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

app\login.component.ts

				
import { Component } from '@angular/core';
import { Login }    from './login';
@Component({
    moduleId: module.id,
    selector: 'my-app',
    templateUrl: 'login.component.html'
})
export class loginComponent {
    model = new Login('', '');

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


			

app\login.component.html

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


			

app\app.module.ts

				
import { NgModule }      from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule }   from '@angular/forms';
import { loginComponent }  from './login.component';
@NgModule({
    imports: [
        BrowserModule,
        FormsModule
    ],
    declarations: [
        loginComponent
    ],
    bootstrap: [loginComponent]
})
export class AppModule { }


			

実行イメージ



ページのトップへ戻る