Angular 18シリーズ(32) ControlValueAccessorのカスタムフォームコントロール

クズども · 2025年4月30日 16:00:55に投稿

要件:日常的なフロントエンド開発では、フォームがフォームを通じてデータを追加・編集するためによく使われます。 FormGroupのインスタンスはFormControlインスタンスのセットを追跡でき、FormGroupが作成されると、その中の各コントロールを名前で追跡できます。フォームコントロールはどうやってカスタマイズすればいいですか?

まずレンダリングを見てみましょう。

手順は以下の通りです:

ControlValueAccessorインターフェースを継承します
NG_VALUE_ACCESSORプロバイダーに登録してください

ControlValueAccessorインターフェースを継承します

ControlValueAccessorインターフェースは以下の4つのメソッドを定義しています:

writeValue:FormControl APIを明示的に呼び出す任意のvalueアクションは、カスタムフォームコントロールのwriteValue()メソッドを呼び出し、新しい値をパラメータとして渡します。これはネイティブフォームコントロールの値を設定します。データフローはAngularフォームからネイティブフォーム(カスタムコントロール)>からです。
registerOnChange:onChangeイベントを登録します。これは初期化時に呼び出されるイベントトリガー関数です。このイベントトリガー関数の用途は何ですか? まずはregisterOnChangeにイベントトリガー関数を保存し、適切なタイミング(例えばコントロールがユーザー入力を受けて応答する必要がある時)に呼び出す必要があります。この機能は「コントロール内のフォームデータに変更があった際に呼び出し元がコントロールに通知するAPI」、つまりコントロール内の情報を同期させるためのものと理解できます。このイベント関数のパラメータは、Angular形式が受け取るべき値です。ネイティブフォーム(カスタムコントロール)からAngularフォーム>データフロー。
registerOnTouched:ユーザーがコントロールと操作した際にトリガーされるコールバック関数であるonTouchedイベントをレジスタします。この関数は、フォームコントロールにすでに触れられたことを通知し、バウンドされたFormContorlの内部状態を更新するために使われます。ネイティブフォーム(カスタムコントロール)からAngularフォーム>データフロー。
setDisabledState:フォームの状態がDISABLEDに変わる場合、フォームAPIはsetDisabledState()メソッドを呼び出して対応するDOM要素を有効化または無効化します。データフローはAngularフォームからネイティブフォーム(カスタムコントロール)>からです。

相互作用は以下の通りです。

実際、ネイティブフォームコントロールはControlValueAccessorに似たインターフェースも持っています。例えば、Angularがコンポーネントテンプレートで入力やテキストエリアのDOMネイティブコントロールに遭遇すると、DefaultValueAccessorコマンドを使用します。

アクセサ	フォーム要素
DefaultValueAccessor	入力、テキスト領域
チェックボックス:ControlValueAccessor	input[type=checkbox]
NumberValueAccessor	input[type=number]
RadioControlValueAccessor	入力[タイプ=無線]
RangeValueAccessor	input[type=range]
SelectControlValueAccessor	選ぶ
SelectMultipleControlValueAccessor	select[複数]

上記は、AngularがすべてのネイティブDOMフォーム要素、すなわち組み込みのControlValueAccessorのために作成したAngularフォームコントロールです。

ドキュメンテーション：ハイパーリンクのログインが見えます。

NG_VALUE_ACCESSORプロバイダーに登録してください

ControlValueAccessorインターフェースを実装した後、カスタムフォームコントロールをAngularで認識・統合できるようにNG_VALUE_ACCESSORとしても登録する必要があります。そうでなければ「RuntimeError: NG01203: No value accessor for form control name: 'xxx'」というエラーが発生します。

ドキュメンテーション：ハイパーリンクのログインが見えます。

エンコードする

手順に従い、完全なコーディング作業、効果は初期レンダリングで、コードは以下の通りです。

HTMLページ:

ログインが見えます。

TSコード:

ログインが見えます。

参考：

ハイパーリンクのログインが見えます。
ハイパーリンクのログインが見えます。

[角] Angular 18シリーズ(32) ControlValueAccessorのカスタムフォームコントロール

関連記事

閲覧したセクション