38. 双方向バインディング — [(ngModel)] で入力と同期する

input要素の入力内容とクラスのプロパティを常に同じ値に保つには、双方向バインディングを使います。FormsModule をコンポーネントの imports に追加し、<input [(ngModel)]="name"> と書くだけで、入力すればプロパティが更新され、クラス側で値を変えれば入力欄の表示も変わります。

実務では検索ボックスや設定画面など、入力値をすぐクラス側で使いたい場面で活躍します。[( )] という記法は「[ ]で値を流し込む」と「( )で変更を受け取る」の合体で、形がバナナを箱に入れた姿に見えることから「バナナ・イン・ア・ボックス」という覚え方が定番です。

FormsModule を imports に入れ忘れると ngModel が認識されずエラーになるので注意しましょう。また、以前学んだ model() は自作コンポーネント同士(親子間)の双方向同期、[(ngModel)] はinputなどのフォーム要素との同期、と対象が違う点も区別しておくと混乱しません。

サンプルコード(フレームワーク環境が必要なため表示のみ)

import { Component } from '@angular/core';
import { FormsModule } from '@angular/forms';

@Component({
  selector: 'app-name-editor',
  // ngModel を使うには FormsModule を imports に追加する
  imports: [FormsModule],
  // [( )] = [ ]の流し込み + ( )の受け取り。入力とプロパティが同期する
  template:
    '<input [(ngModel)]="name" placeholder="名前">' +
    '<p>こんにちは、{{ name }}さん</p>',
})
export class NameEditorComponent {
  name = '田中'; // 入力欄に打つと即座に更新される
}

サンプルコードで身につける(5本) →

学んだ概念を、素朴な例から実務寄りの例まで5つの具体例で確認します。

公式ドキュメントで詳しく ↗