ControlValueAccessorインターフェース
カスタムウィジェットをAngularフォームに接続します
「ControlValueAccessorインターフェース」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
カスタムコントロールを使う理由
Angular フォームは標準の input をそのまま扱えます。独自のコンポーネント（評価ウィジェット、カラーピッカー、トグルなど）を ngModel や formControlName で使えるようにするには、ControlValueAccessor を実装する必要があります。
橋渡し役
ControlValueAccessor（CVA）は、Angular のフォームモデルとコンポーネントのビューをつなぐ橋渡し役です。モデルから値を書き込む方法と、ユーザーの変更をモデルに戻す方法を定義します。
インターフェース
CVA では、writeValue、registerOnChange、registerOnTouched、および省略可能な setDisabledState の4つのメソッドが必要です。
interface ControlValueAccessor {
writeValue(value: any): void;
registerOnChange(fn: (v: any) => void): void;
registerOnTouched(fn: () => void): void;
setDisabledState?(isDisabled: boolean): void;
}プロバイダーを登録する
multi: true を指定した NG_VALUE_ACCESSOR を提供し、useExisting でコンポーネントを指すことで、そのコンポーネントが value accessor であることを Angular に伝えます。
import { NG_VALUE_ACCESSOR } from '@angular/forms';
import { forwardRef } from '@angular/core';
providers: [{
provide: NG_VALUE_ACCESSOR,
useExisting: forwardRef(() => RatingComponent),
multi: true
}]forwardRef が必要な理由
forwardRef が必要なのは、クラスが定義される前に、自身のメタデータ内で自分自身を参照するためです。クラスが存在するまで解決を遅延させます。
コンポーネントの基本構造
カスタムコントロールでは、プロバイダーを宣言し、インターフェースのメソッドを実装します。クラスは現在の値を内部に保持します。
@Component({
selector: 'app-rating',
providers: [/* NG_VALUE_ACCESSOR ... */]
})
export class RatingComponent implements ControlValueAccessor {
value = 0;
// writeValue, registerOnChange, registerOnTouched ...
}標準 input と同じように使う
CVA を実装すると、コンポーネントを標準の input と同じように、テンプレート駆動フォームやリアクティブフォームに組み込めます。
<app-rating formControlName="stars"></app-rating>
<!-- or -->
<app-rating [(ngModel)]="stars"></app-rating>データの2つの方向
モデルからビューへのデータフローは writeValue を通ります（Angular がフォームの値を渡します）。ビューからモデルへのデータフローは、registerOnChange に登録したコールバックを通ります（ユーザーの変更を渡します）。
Touched の追跡
フォームのバリデーション UX は touched 状態に依存します。通常は blur 時に、registerOnTouched から受け取ったコールバックを使って Angular に通知します。
無効化状態
フォームがコントロールを無効化すると（control.disable()）、Angular は setDisabledState を呼び出します。これにより、コンポーネントは見た目を反映し、入力を無視できます。
ロードマップ
次のレッスンでは、各要素を実装します。値の書き込みと登録、無効化状態と touched 状態の処理、バリデーションの追加を扱います。これらを組み合わせることで、フォームに完全に統合されたカスタムコントロールになります。
クイックチェック
CVA の基礎についての理解度を確認しましょう。
まとめ
ControlValueAccessor は4つのメソッドを通じてカスタムコンポーネントを Angular フォームに接続し、forwardRef と multi: true を指定した NG_VALUE_ACCESSOR を使って登録することを学びました。次は、値の書き込みと登録を実装します。
よくある質問
「ControlValueAccessorインターフェース」レッスンは無料ですか？
はい。「ControlValueAccessorインターフェース」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「ControlValueAccessorインターフェース」で何を学びますか？
カスタムウィジェットをAngularフォームに接続します ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「ControlValueAccessorインターフェース」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。
このコースのすべてのレッスン
- ControlValueAccessorインターフェース
- 値の書き込みと登録
- 無効状態とタッチ状態の処理
- カスタムコントロールのバリデーション