質問をすることでしか得られない、回答やアドバイスがある。

15分調べてもわからないことは、質問しよう!

新規登録して質問してみよう
ただいま回答率
85.35%
Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

Q&A

解決済

1回答

1273閲覧

Angularのcontrolvalueaccessorについて

SHOsan

総合スコア1

Angular

Angularは、JavaScriptフレームワークです。AngularJSの後継であり、TypeScriptベースで実装されています。機能ごとに実装を分けやすく、コードの見通しが良いコンポーネント指向です。

0グッド

0クリップ

投稿2021/05/08 14:39

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

気になる質問をクリップする

クリップした質問は、後からいつでもMYページで確認できます。

またクリップした質問に回答があった際、通知やメールを受け取ることができます。

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

guest

回答1

0

ベストアンサー

前提として、「親コンポーネント」の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度だけ実行される関数、そのほかは何らかの値が変化したときに実行される関数です。

投稿2021/05/12 01:53

kaito3desuyo

総合スコア143

バッドをするには、ログインかつ

こちらの条件を満たす必要があります。

SHOsan

2021/05/13 12:06

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

あなたの回答

tips

太字

斜体

打ち消し線

見出し

引用テキストの挿入

コードの挿入

リンクの挿入

リストの挿入

番号リストの挿入

表の挿入

水平線の挿入

プレビュー

15分調べてもわからないことは
teratailで質問しよう!

ただいまの回答率
85.35%

質問をまとめることで
思考を整理して素早く解決

テンプレート機能で
簡単に質問をまとめる

質問する

関連した質問