2018-10-23に更新

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開発者

Crieitの開発者です。 主にLAMPで開発しているWebエンジニアです(在宅)。大体10年程。 記事でわかりにくいところがあればDMで質問していただくか、案件発注してください。 業務依頼、同業種の方からのコンタクトなどお気軽にご連絡ください。 業務経験有:PHP, MySQL, Laravel5, CakePHP3, JavaScript, RoR 趣味:Elixir, Phoenix, Node, Nuxt, Express, Vue等色々

Crieitはβバージョンで開発中です。進捗は公式Twitterアカウントをフォローして確認してください。 興味がある方は是非記事の投稿もお願いします! どんな軽い内容でも嬉しいです。
なぜCrieitを作ろうと思ったか

また、「こんな記事が読みたいけど見つからない!」という方は是非記事投稿リクエストボードへ!

関連記事

コメント