0Pricing
Angular Academy · レッスン

ngModelによる双方向バインディング

フォーム入力とコンポーネントの状態を同期します。

「ngModelによる双方向バインディング」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。

双方向バインディングとは

双方向バインディングは、コンポーネントとビューの間で値を同期します。一方を更新すると、もう一方も更新されます。構文はバナナ・イン・ア・ボックスの[()]です。

バナナ・イン・ア・ボックス

結合された[(...)]構文は、プロパティバインディングとイベントバインディングを組み合わせた省略記法です。角括弧が箱、丸括弧がバナナを表します。

<!-- shorthand -->
<input [(ngModel)]="name">

<!-- equivalent to -->
<input [ngModel]="name" (ngModelChange)="name = $event">

ngModelの導入

ngModelは、input、select、textareaなどのフォームコントロールで双方向バインディングを行うためのディレクティブです。

<input [(ngModel)]="username">
<p>Hello, {{ username }}</p>

FormsModuleのインポート

ngModelを使用するには、スタンドアロンコンポーネントまたはNgModuleでFormsModuleをインポートする必要があります。

import { FormsModule } from "@angular/forms";

@Component({
  selector: "app-demo",
  standalone: true,
  imports: [FormsModule],
  template: "<input [(ngModel)]='name'>"
})
export class DemoComponent {
  name = "";
}

テキスト入力のバインディング

ユーザーが入力するとバインドされたプロパティがすぐに更新され、コードでプロパティを変更すると入力欄も更新されます。

<input [(ngModel)]="email">
<p>Current: {{ email }}</p>

チェックボックスのバインディング

ngModelはチェックボックスにも使用でき、boolean値にバインドします。

<input type="checkbox" [(ngModel)]="agreed">
<p>Agreed: {{ agreed }}</p>

// component
agreed = false;

セレクトのバインディング

select要素では、ngModelが選択されたオプションの値にバインドされます。

<select [(ngModel)]="color">
  <option value="red">Red</option>
  <option value="blue">Blue</option>
</select>
<p>Picked: {{ color }}</p>

フォーム内のngModel

テンプレート駆動フォーム内では、name属性を追加して、Angularがコントロールをフォームに登録できるようにします。

<form #f="ngForm">
  <input name="city" [(ngModel)]="city">
</form>

スタンドアロンのngModel

フォームの外では、FormsModuleがインポートされていればngModelを単独で使用できます。nameは必要ありません。

<input [(ngModel)]="search">

ngModelを使う場面

ngModelは、シンプルなテンプレート駆動フォームに適しています。複雑なバリデーションや動的フォームでは、リアクティブフォームがよく選ばれます。

変更への反応

変更への反応だけが必要な場合は、完全な双方向バインディングを使う代わりに、(ngModelChange)イベントを直接バインドしてください。

<input [ngModel]="q" (ngModelChange)="onSearch($event)">

理解度チェック

ngModelの双方向バインディングについての理解度を確認しましょう。

まとめ

双方向バインディングでは、プロパティバインディングとイベントバインディングを組み合わせたバナナ・イン・ア・ボックス構文[(ngModel)]を使用します。input、チェックボックス、selectで使用するにはFormsModuleをインポートします。

よくある質問

「ngModelによる双方向バインディング」レッスンは無料ですか？

はい。「ngModelによる双方向バインディング」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。

「ngModelによる双方向バインディング」で何を学びますか？

フォーム入力とコンポーネントの状態を同期します。 ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。

Angular Academyを始めるのに経験は必要ですか？

事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。

「ngModelによる双方向バインディング」レッスンにはどのくらい時間がかかりますか？

ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。

このAngular Academyレッスンでコードを書いて実行できますか？

はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。

このコースのすべてのレッスン

  1. プロパティバインディングとイベントバインディングの復習
  2. ngModelによる双方向バインディング
  3. model() Signal入力
  4. カスタム双方向バインド可能プロパティ
← Angular Academyに戻る