Angular2でフォームのバリデーションチェック、動的にCSSの追加を行い、エラー時に色を変えたり、メッセージを表示する方法をまとめました。 ※Angular2の2.0.0版、TypeScriptを使って確認したものです。（デモはv4.4.3、v2.0.0で動作確認） ※目次をクリックすると目次の下部にコンテンツが表示されます。 １．FormsModuleのインポート ２．NgModelディレクティブを使ったシンプルなフォーム作成例（バリデーションチェックなし） ３．バリデーションチェック、動的にCSS追加 ４．フォームの作成方法 ５．デモ Angular2のフォームの機能を使用する場合、別途フォームのモジュールをインポートする必要があります。 一般的なAngular2のフォーム機能を使用する場合、FormsModuleをインポートします。 ※ダイナミックフォームを使用する場合は、Rea
This post currently reflects an earlier version of Angular, and may not be up to date or reflect the current release. This post currently reflects an earlier version of Angular, and may not be up to date or reflect the current release. Learn more about Angular migration, here. I’ve heard a lot of people express frustration with building forms in Angular 2. I think in large part this derives from b
おはようございます、@armorik83です。今回はAngular 2の特徴的なAPIのうち@Inputを取り上げます。 本稿執筆時点での最新バージョンはAngular 2 alpha.48なのですが、ビルドが通らない致命的な問題があったため、仕方なくalpha.47で動かしています。@Inputについてはa47, 48で破壊的変更はありません。 【追記151226】Angular 2 beta.0に対応しました。 @Inputとは @Input (Docs) は、Angular 2のComponentに属性を定義するAPIです。つまり、HTMLでの独自の要素に対して独自の属性を持たせることができます。
Angular 2: Connect your custom control to ngModel with Control Value Accessor. NOTE: Please note that this article refers to an old version of Angular. Core concepts and ideas may still be useful but not all examples will work with current Angular without changes. So you are starting to flex your new Angular 2 muscles and have built the mother of all custom form controls. I mean that thing can do
【20160819更新】rc.5対応した記事を書きました。Angular 2入門：NgModelに触れてみる [rc.5対応] この記事で書かれている内容は古いため参考にされないようご注意ください。 おはようございます。今井です。 最近は、ng-kyotoというAngularユーザーコミュニティでオーガナイザーをさせていただいております。Angular 2というこれまでのAngular JSとは全く異なる（！？）フレームワークがそろそろβ版になるということで、初めて触れる次第です。 私が初めてAngular JSと触れた時に一番印象的だったのは双方向バインディングだったような気がします。その双方向バインディングがAngular 2でどうなったのかを見てみたいと思います。 注意：この記事では、Angular 1.xをAngular JS。Angular 2.xをAngular 2と呼称します
An Angular starter kit featuring Angular 6, Ahead of Time Compile, Router, Forms, Http, Services, Tests, E2E), Karma, Protractor, Jasmine, Istanbul, TypeScript, @types, TsLint, Codelyzer, Hot Module Replacement, and Webpack. If you're looking for Angular 1.x please use NG6-starter If you're looking to learn about Webpack and ES6 Build Tools check out ES6-build-tools If you're looking to learn Type
Angularのコンポーネントやディレクティブには Lifecycle Hooks（ライフサイクルフック） という仕組みがあり、コンポーネントの変化にあわせてコールバックを設定できます。これによりコンポーネントのデータやビューの変更時の処理を追加できます。 コンポーネント志向のAngularアプリケーションの構築では、Lifecycle Hooks の理解が不可欠です。 今回は Lifecycle Hooks の基本的な仕組みを紹介します。 Lifecycle Hooksとは 記事の冒頭でも説明したように、Lifecycle Hooks はコンポーネントやディレクティブが変化（作成・変更・破棄）するタイミングで実行されるコールバックメソッドの総称です。 例えば、次のようなケースで利用します。 コンポーネントの初期化時にHttpクライアントでデータを取得する。親コンポーネントの初期化時に、子
Angular2 Advent Calendar 12日目 です。 僕は ionic が好きなので、ionic の話をしたいと思います。 ionic ionic は AngularJS ベースの UI フレームワークです。CSS/JavaScript の UI コンポーネント集という点に留まらず、cordova を同梱してハイブリッドアプリを作成することが可能です。また、デバイス上でのデバッグツールや、痒いところに手が届くコマンドラインツール等（例えば地味に面倒くさいアイコン用画像をリサイズとか）のエコシステム全体を包含する環境になっているという点が特徴的で、僕が好きなところでもあります。 弱点は Angular に密結合している点です。UIパーツがディレクティブで定義されているので、「ionic の UIコンポーネントは使いたいけど、Angular 以外のJSフレームワークを使いたい」み
JSPM？system.js？webpack？まだAngular2/TypeScriptのBundle環境構築で消耗してる話webpackAngular2jspmSystemJSrollup.js 注) この記事は試行錯誤の記録です。従って間違いが数多く含まれている可能性が高いです。もっと良い方法を知っている方はぜひ教えてください。 現段階の結論 注） 現在は、rollup.jsでバンドルしています。 system.jsを利用しています。 tsconfig.json, typing.jsonを適切に記載してからtscとuglifyjsを利用して minifyすることで、最終的なfootprintを5kbまで減らすことができました。 （system.jsでxhrが大量に走る問題は下記（system.jsの項）の通りmapとpackageの記載を削除することで解決しました。） 結局、現在はgi
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
