トッカンソフトウェア

Angular テンプレート駆動フォーム

今回は テンプレート駆動フォーム をやります。

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

サンプルソース

formをngSubmitイベントで送信します。テンプレート変数(#fm4="ngForm")を定義し、引数に指定することで処理側に入力値を送信できます。

app.component.ts
				
import { Component } from '@angular/core';

@Component({
  selector: 'app-root',
  template:
    `
    <form #fm4="ngForm" (ngSubmit)="onSubmit(fm4)" >
      <input type='text' name="nm3" ngModel/>
      <input type='text' [(ngModel)]="message4" required name="nm4" #nmMdl4="ngModel" />
      <input type='text' name="nm5"/>

      <div [hidden]="!nmMdl4.dirty">
        <h1>入力:{{message4}}</h1>
      </div>

      <table>
        <tr>
          <td>値を1回も変更していない</td><td>{{nmMdl4.pristine}}</td>
        </tr>
        <tr>
          <td>値が変更された</td><td>{{nmMdl4.dirty}}</td>
        </tr>
        <tr>
          <td>フォーカスがあった</td><td>{{nmMdl4.touched}}</td>
        </tr>
        <tr>
          <td>フォーカスがない</td><td>{{nmMdl4.untouched}}</td>
        </tr>
        <tr>
          <td>値が有効</td><td>{{nmMdl4.valid}}</td>
        </tr>
      </table>
      <button type="submit" [disabled]="!fm4.form.valid">送信</button>
    </form>
    `
})
export class AppComponent {
  message4 = "ここをチェック";

  onSubmit(fm) {
    console.log(JSON.stringify(fm.value));
    alert(JSON.stringify(fm.value));
  }
}


			

テンプレート駆動フォームを使用する場合、 app.module.tsモジュールでFormsModuleをimportし、@NgModuleのimportsにFormsModuleを指定する必要があります。

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

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

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


			

実行イメージ


入力項目に対してチェックできること
指定 True時の状態
pristine 値を1回も変更していない
dirty 値が変更された
touched フォーカスがあった
untouched フォーカスがない
valid 値が有効
form.valid フォームすべての値が有効




ページのトップへ戻る