Angularで自作コンポーネントのngModel双方向バインディング
Angularはinputタグ等のform用タグにて[(ngModel)]属性を使用すると双方向バインディングになる便利な機能がある。
これを自作した独自のコンポーネントで実現する方法。
簡単に言えば下記の解説通り。
Custom Form Controls in Angular by thoughtram
ざっと説明すると下記の通り。
ControlValueAccessorインターフェイスを使用する
コンポーネントにControlValueAccessorをimplementする。
writeValue
プロパティとして渡された値が来るので処理。
registerOnChange, registerOnTouched
changeとtouchedのコールバック関数が渡されるので、
それを保存しておいてコンポーネントの呼び出し元に返したい時に結果を返す。
providers
Angularにきちんと認識させるためにNG_VALUE_ACCESSORのprovidersを設定しているらしい。
まとめ
上記のような感じでできる。
共通設定などを一切汚さずコンポーネントのみで解決できるところが良い。
Crieitの開発者です。 Webエンジニアです（在宅）。大体10年ちょい。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel, React, Flutter, Vue.js, Node, RoR 趣味:Elixir, Phoenix, Nuxt, Express, GCP, AWS等色々 PHPフレームワークちいたんの作者
Crieitは誰でも投稿できるサービスです。 是非記事の投稿をお願いします。どんな軽い内容でも投稿できます。
また、「こんな記事が読みたいけど見つからない！」という方は是非記事投稿リクエストボードへ！
こじんまりと作業ログやメモ、進捗を書き残しておきたい方はボード機能をご利用ください。
ボードとは？
コメント