Angular リアクティブフォーム

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

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

サンプルソース

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

app.component.ts


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

@Component({
  selector: 'app-root',
  imports: [ReactiveFormsModule, JsonPipe],
  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));
  }
}

以下で実行できます。

				
ng serve --open

実行イメージ

ページのトップへ戻る