Angular リアクティブフォーム

今回はリアクティブフォームをやります。
リアクティブフォームはとテンプレート駆動フォーム比べて複雑な画面作成時に利用します。
画面定義よりロジック定義側で色々やる感じです。

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

サンプルソース

FormGroupやFormControlを使ってリアクティブフォームで連携します。

app.component.ts

				
import { Component } from '@angular/core';
import { FormBuilder, FormGroup, Validators } from '@angular/forms';

@Component({
  selector: 'app-root',
  template:
    `
    <form [formGroup]="frmGrp" (ngSubmit)="onSubmit()">
      Name: <input formControlName="name">
      Password: <input formControlName="pass">
      <button type="submit" [disabled]="!frmGrp.valid">送信</button>
    </form>
    <p>Value: {{ frmGrp.value | json }}</p>
    <p>Validator: {{ frmGrp.valid  }}</p>
    `
})
export class AppComponent {
  frmGrp: FormGroup;

  constructor(private fb: FormBuilder) {
    this.frmGrp = this.fb.group({
      name: '',
      pass: ['', Validators.required]
    });
  }

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

app.module.tsモジュールでReactiveFormsModuleをimportし、@NgModuleのimportsにReactiveFormsModuleを指定する必要があります。

app.module.ts

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

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

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

以下で実行できます。

				
ng serve --open

実行イメージ

ページのトップへ戻る