Angularのcontrolvalueaccessorについて

Question

今現在Angularの勉強を行っています。 controlvalueaccessorについて質問があります。 下の4つの要素があまり理解できないので役割を教えていただきたいです。 公式ドキュメントなどを見ましたが➀以外はあまり理解できませんでした。 よろしくお願いします。
➀writeValue
➁registerOnChange
③registerOnTouched
④setDisabledState
公式ドキュメント https://angular.io/api/forms/ControlValueAccessor

Answer 1

前提として、「親コンポーネント」のFormControlと、「子コンポーネント」のFormControlがあり、それを連携して動かすための仕組みが「Control Value Accessor」（以下CVAとします）である、と覚えるとわかりやすいかもしれません。（必ずしも子にFormControlが必要というわけではないですが）

①writeValue
「親」のFormControlのvalueが変化した時に実行される関数です。
通常はそのまま「子」のFormControlにsetValue()することが多いでしょう。

②registerOnChange
「親」でOnChangeイベントを発火するためのコールバック関数が引数に入っていて、そのコールバック関数をごにょごにょするための関数です。

registerOnChange(fn: any): void {
    this.childControl.valueChanges.subscribe(fn);
}

この場合は「子」の値が変わった時にOnChangeイベントを発火します。

③registerOnTouched
registerOnChangeと同じで、こちらはOnTouchedイベントを発火するためのコールバック関数です。

registerOnTouched(fn: any): void {
    this.onTouched = fn;
}

このようにして一回インスタンスプロパティに保存すれば、this.onTouched()としてどこからでも「親」のonTouchedイベントを発火できるようになります。

④setDisabledState
「親」のFormControlのdisableステータスが引数に入っていて、それが変化したときに、何をするかを定義します。

setDisabledState?(isDisabled: boolean): void {
    isDisabled ? this.childControl.disable() : this.childControl.enable();
}

この場合は、「親」がdisableなら「子」もdisableに。

②、③はおそらく基底クラスのconstractorか何かで、インスタンス化されたときに1度だけ実行される関数、そのほかは何らかの値が変化したときに実行される関数です。

Comments

[SHOsan]

大変わかりやすくとてもありがたいです.
自分の中ではOnTouchedイベントが発生したら登録した関数が動くのかなと思っていたのですが逆だったのですね！
とても丁寧にありがとうございました！！