値の書き込みと登録
writeValueと変更コールバックを実装します
「値の書き込みと登録」はCoddyKit上の無料Angular Academyレッスンです。 これはレッスン2/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これはAngular Academy学習パスの一部であり、ウェブとCoddyKitアプリ全体で進捗が同期されます。 Angular Academyコースには全4レッスンが含まれています。
2つの中心的なメソッド
value accessor の中心は、データを双方向に受け渡すことです。writeValue はモデルの値をビューに取り込み、registerOnChange から受け取ったコールバックはユーザーの編集内容をモデルに送ります。
writeValue
フォームがコントロールの値を設定またはリセットすると、Angular は writeValue を呼び出します。ビューに反映されるよう、値をコンポーネントの状態に保存してください。
value = 0;
writeValue(value: number): void {
this.value = value ?? 0;
}null を処理する
リセット時に writeValue が null を受け取ることがあります。テンプレートが壊れないよう、安全なデフォルト値に正規化してください。
writeValue(value: string | null): void {
this.text = value ?? '';
}registerOnChange
Angular は、値が変更されるたびに呼び出すコールバックを渡します。それを保存し、ユーザー操作時に呼び出します。
private onChange: (v: number) => void = () => {};
registerOnChange(fn: (v: number) => void): void {
this.onChange = fn;
}変更を通知する
ユーザーが操作したら、内部状態を更新し、保存した onChange コールバックに新しい値を渡してフォームモデルを更新します。
select(rating: number): void {
this.value = rating;
this.onChange(rating);
}テンプレートを接続する
テンプレートは現在の状態を表示し、ユーザー操作時にハンドラーを呼び出します。そのハンドラーが onChange を呼び出します。
template: '<button *ngFor="let s of stars" (click)="select(s)" [class.on]="s <= value">star</button>'ビューを同期する
writeValue が内部状態を更新し、テンプレートがその状態にバインドされているため、プログラムによるフォームの変更（patchValue など）はすぐにコンポーネントへ反映されます。
OnPush との相性
OnPush の変更検知では、コンポーネントのフィールドを通じて状態を更新し、バインディングに反応させます。非同期ソースから状態を変更する場合は、ビューを最新に保つために mark for check を行うか、signals を使用してください。
writeValue で onChange を呼び出さない
重要: writeValue の内部から onChange を呼び出してはいけません。プログラムによる更新がモデルに送り返され、ループが発生する可能性があります。onChange はユーザー操作による変更にのみ使用します。
値の型付け
コントロールに具体的な値の型（number、string、カスタムインターフェース）を指定し、メソッドにも適切な型を付けることで、リアクティブフォームとの統合をより安全にします。
export class RatingComponent implements ControlValueAccessor {
value = 0;
writeValue(v: number) { this.value = v ?? 0; }
registerOnChange(fn: (v: number) => void) { this.onChange = fn; }
}ここまでの結果
writeValue と registerOnChange を実装したことで、コントロールはフォームモデルから値を読み取り、フォームモデルへ値を書き込めるようになりました。次は、完全な UX のために無効状態と touched 状態を扱います。
クイックチェック
値の書き込みに関する知識を確認しましょう。
まとめ
writeValue（モデルからビューへの反映、null の処理）を実装し、registerOnChange のコールバックを使ってユーザーによる変更を通知（ビューからモデルへの反映）しました。また、テンプレートを接続し、writeValue から onChange を呼び出してはいけないことを学びました。
よくある質問
「値の書き込みと登録」レッスンは無料ですか？
はい。「値の書き込みと登録」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Angular Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Angular Academyコースには全4レッスンが含まれています。
「値の書き込みと登録」で何を学びますか？
writeValueと変更コールバックを実装します ブラウザで直接実行するハンズオンコードでAngular Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Angular Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのAngular Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン2/4です。
「値の書き込みと登録」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このAngular Academyレッスンでコードを書いて実行できますか？
はい。すべてのAngular Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。