Angularでフォームに入力した値をリアルタイムに表示する

Angularで、フォームに入力した値をフォーム以外の場所にリアルタイムに表示するには、リアクティブフォームを使います。

以下のようなイメージ。

テキストボックスの値が「Value:」の所に表示されています。

ざっくり以下のような事をします。

  • AppコンポーネントでReactiveFormsModuleを読み込む。
  • フォームを表示するコンポーネントでFormControlを読み込む。
  • フォームを表示するテンプレートを作る。

app.module.ts でReactiveFormsModule を読み込みます。

…
import { ReactiveFormsModule } from '@angular/forms';

…
imports: [
  ReactiveFormsModule
],

次にフォームを表示するためのコンポーネントを作り、そこでFormControlを読み込みます。

コンポーネント本体は以下のような感じ。

import { Component, OnInit } from '@angular/core';
// ↓リアクティブフォームを使う準備
import { FormControl } from '@angular/forms';

@Component({
  selector: 'app-book-search',
  templateUrl: './book-search.component.html',
  styleUrls: ['./book-search.component.css']
})
export class HogeComponent implements OnInit {
  // ↓フォームと連携する値を用意する
  keyword = new FormControl('');

  constructor() { }

  ngOnInit() {
  }

}

テンプレートは以下のような感じ。

<input type="text"[formControl]="keyword">
Value: {{ keyword .value }}

以上です。

タイトルとURLをコピーしました