AngularJSのバリデーションにハマった件をまとめてみた。その１ | DevelopersIO
はじめに 好物はインフラとフロントエンドのかじわらゆたかです。 今回の案件ではAngularJSのFormのバリデーションを用いました。 チェックの条件をView側に埋め込むことができ、 また、ngMessage ディレクティブを用いることで、エラーメッセージの表示まで行うことができます。 非常に便利な機能ではあるのですが、２点ほどハマった点があったので紹介します。 Modelにバインディングされていない 冷静に考えればそのとおりなのですが、バリデーションでエラーとなった値はModelにはバインディングされません。 これを意識しておかないとパスワードとパスワード（再入力）の同値評価をバリデーションで行おうとした際に、 ちょっと困ったことになります。 現象説明 Validation Form Check Sample 上記はパスワードとパスワード確認用を入力するフォームです。 両方のフォーム
AngularJS 1.3のフォームまわりの機能強化
こんにちは中川です。 先日、AngularJS 1.3 がリリースされましたね。 動作速度の改善や、メモリ消費量の削減などパフォーマンス面での改善もうれしいところですが、 機能的にはフォーム関連の機能強化が特にうれしく感じましたので、紹介したいと思います。 ■ ngModel.$validators https://docs.angularjs.org/api/ng/type/ngModel.NgModelController ngModel.$validators を使うと、独自のバリデーション関数を簡単に定義することができるようになりました。 以下の例のように、入力値を引数で受け取り、返り値で真偽値を返す関数を$validatorsオブジェクトに定義します。 $validatorsのキー(ここではvalidCharacters)が、エラーメッセージ表示時などの参照用に利用できます。 n
AngularJS 使って手軽でリッチな入力フォームを作ってみた - Can I do web?
意外とAngularJSを使った入力フォームのサンプルが無かったので作ってみました。 まず作ったものがコチラ AngularJSを使えば手軽にシンプルかつリッチな入力フォームを作ることができます。自前のJavaScriptを用意すればさらに凝ったものも作ることができますが、今回は自前のJavaScriptを使わないでもこれだけできます！というサンプルです。 個別のバリデーションチェック サンプルで行われているバリデーションは、全てAngularJSによるもので、JavaScriptによるコードの記述は一切書いていません。その代わりに、以下のような記述でチェックする内容を指定しています。 <form method="post" name="userInfo"> ... <input type="text" name="userName" ng-model="userName" ng-minl
AngularJSでのバリデーションの基本 | tsuchikazu blog
この記事は、AngularJS Advent Calendar 2014 - Adventar の19日目の記事となります。前日は、@albatrosaryさんのYEOMANにあるAngularJS関連ジェネレータをご紹介します - albatrosary's blogです。YEOMANのジェネレータしか使ってこなかったので、他のも触って違いを感じてみたいです。 今日は、AngularJSの基本的なバリデーションの話です。AngularJSの初心者向けの記事になります。最近、仕事でもAngularJSを触り始めているので、少しずつノウハウを公開していきたいと思います。 AngularJSはバリデーション周りで便利な仕組みが色々と用意されていますが、それを拾い集めるのがなかなか大変なため、基本的なことをまとめてみました。 前提 環境 AngularJS 1.3 やりたいこと メールアドレスが
BEMをSassで快適に書く方法
BEMとはBEMの概要もうすでにいろんなブログやQiitaなどで書かれていると思いますが、自分の頭を整理するためにも書いておきます。BEMはロシアの検索エンジン大手のYandexにより以下を達成するために開発された「cssの記述方法論」です。CSSセレクタの「命名規則」とも言われています。 Block, Element, ModifierBEMは、セレクタの役割を「Block」「Element」「Modifier」の3つの概念に分けて考えるCSSの設計思想です。BEMのドキュメントによると、Block、Element、Modifierは、それぞれ以下のように定義されています。 Block「Block」は独立したエンティティ（実体）であり、アプリケーションを「構成するパーツ」です。Blockは単一で用いることも可能だし、他のBlockを含んで複合的に用いることも可能です。Block名は基本的
Learn web development | web.dev
Stay organized with collections Save and categorize content based on your preferences. Explore our growing collection of courses on key web design and development subjects. An industry expert has written each course, helped by members of the Chrome team. Follow the modules sequentially, or dip into the topics you most want to learn about.
リリース、障害情報などのサービスのお知らせ
最新の人気エントリーの配信
j次のブックマーク
k前のブックマーク
lあとで読む
eコメント一覧を開く
oページを開く
