notebook

都内でWEB系エンジニアやってます。

angular

独自コンポーネントでフォーム用の部品を作る(ngModelを使えるようにする)

独自のコンポーネントでもngModelを使ってデータバインディングをしたい ngModelを使うことでvalidationなども他のinputなどと同様に扱いたい ということで公式のドキュメントにも乗っているのでやってみます angular4で実装してます Angular - ControlValue…

moment-rangeを使いたい

単純にmomentとmoment-rangeをimportしただけだとコンパイルが通らず使えないので対応する必要がありました stackoverflowなどでこうしたらいいよって書いてあったのでやってみたがコンパイルエラーで通らない 使えるようになるまでにやったことのメモ versi…

templateで再帰的なデータを表示させる

親子関係を持った入れ子のデータなどを表示したいといった用件があったときのメモ angularのバージョンは4を使っています データは下記のような感じ stats = [ { id: 1, name: 'A001', depth: 0, children: [ { id: 2, name: 'A002', depth: 1, children:[ {…

angularでvalidation(template driven)

今回はtemplate drivenでのフォーム作成、validationまでやってみます angular4系で動作させてます template driven form とりあえずテキストフィールド一つ作ります app.component.ts import { Component, OnInit } from '@angular/core'; @Component({ sel…

angularでフォーカスが外れたらフォーマットに沿った表示にする

フォームの金額入力とかで、入力時は1000000でフォーカスが外れたら1,000,000といったようにすることで大きい値でも判断しやすくなり入力ミスを減らしたい….. 今回は上記のような要望がちょろっと上がったので実際に試してみました フォーカスが外れたら3桁…

angular getのクエリパラメータを取得する

angularでクエリパラメータを扱う時のメモ 特定の結果を共有したいときとか、もともとgetのパラメータでやりとりしていればURLを共有するだけですが そうじゃない場合、意図的にURLにパラメータをつけてあげることで共有できるようにする必要があります レポ…

angularでコンポーネント間のデータ変更検知 親 -> 子

angularで親コンポーネントから子コンポーネントへのやりとりは@Inputを使います @Inputで受け取った値の変更を検知して何か処理をする場合などはngOnChangesのライフサイクルフックを使います ngOnChangesで変更された値を使って処理をしていたのですが使っ…