Angularjsのフォーム。 愛を見つけた方法

もう一度やらなければなりませんでした。 ひどいことは何もないように思えますが、何百回もやりました。 しかし、感情...これがすべて間違っているという感覚は、このようであってはならず、別の方法があるはずです、私を離れませんでした。 それから、私の世界を永遠に変え、目を開き、人生を意味で満たす会議がすぐにあったことを知りませんでした。 毎朝起きることの意味、私に喜びをほとんど与えなくなったものをすることの意味、この気持ちを他の人と共有することの意味。

川が流れて......

この物語は、聖書の最初のバージョンが出版された1992年にさかのぼります。その契約のほとんどは、今後何年もの間人間の発達のコースを決定しました。 注意深い読者であれば、この原稿にはいくつかの非常に重要な規範について言及していないことに気付くでしょう。



その中でも、私の物語の主なヒロインの一人。 肉眼では、カットされていないダイヤモンドのような元のHTMLが無形だったことがわかります。 当然、これは長い間続くことができず、1993年11月8日にすでに、新しい形の最初の特徴が宝石工房の腸から世界に現れ、その後再来のタブレットで正当な位置を獲得しました。



そして、世界には調和がもたらされているように思われます。 今では普通の人は情報を受け取るだけでなく、対応することもできました。 そして異端が彼らの言葉に見られる場合、バックエンドからの神秘的な警備員は常に救助に来て、彼の正しいスピーチで正しい道を設定します。 しかし、このドラマには落ち着きがありません。



人類の歴史全体が自由への道です。 奴隷制からの解放、王の抑圧から、彼らの故郷の国境からの自由。 謙虚な生活を送っている1000人の人々に対して1人の自由思想家が見つかり、船が再び航海し、バリケードが建ち、黒人が大統領に立候補するのに十分です。 ですから、今回は、人々が自由、サーバー側の絆からの自由を望んでいたのです。 インターフェイスの神聖な力、データ転送の節約、黄金の都市フロントエンドへの道を約束した自由。

ポイントに来て

しかし、話のメインラインに戻ります。 フォームはどうなりましたか？ 形が変わり始めました。 ある種の異教のポータルからブラウザーライフの世界へのフロントエンドの開発により、それは装飾の要素となり、その強さをJavascript教会の手に移しました。 なぜこれが起こったのか、モーガン・フリーマンだけが知っている、事実を見てみよう。 そして事実は、古い信者だけがサーバー側でフォームをチェックし続け、イエズス会は顧客の無知の状態で完璧を求めて人類の欲望を吐き出しているということです。



あなたの謙umbleな召使は、どちらか一方とは決して関係がありませんでした。 若い熊手、私は生き、人生を楽しんだ。 検証が必要ですか？ はい、 jQuery validationをお願いしますが、少なくとも私はそれを自分で書きます。 同じことを何度も繰り返します：メール、パスワード、名前...メール、パスワード、名前...メール、パスワード、日付...そして、金庫の中のこまのように、頭の中で思いっきりくるくると回る考えが起こりました。 今、私はフォームの処理を書く仕事をしたとき、私はワイパーの不足のためにモペットのフロントガラスから雪を拭き取らざるを得なかったインドネシアの農民であるという感覚に打ち勝ちました。



そしてもちろん、ここでは、 聖三位一体教会のきちんとした教区民として、第五の生まれ変わりの奇跡的な属性が私たちに送られたとき、私の喜びは限りがありませんでした。 もう一度、彼らは私に、ケーブルの向こう側に誰かがいて、彼が私の祈りを聞いているという希望と信仰を与えました。 しかし、確かに、多幸感は短命でした。 定型化の可能性の欠如、フォームへの入力状態の制御は、プレゼンテーションを制御するロジックを規定するたびに必要です。



しかし、かつて、 私の宗派の友人の輪の中に、彼らは美しい乙女と一緒に私を連れてきました。 彼女は若く、外出し始めたばかりでした。 彼女の名前は、ロシア風ならアンジェラだった 。 最初は彼女は私には奇妙に思えた。 何よりも、彼女は何も隠そうとはしなかったが、すべてが額にあったという事実に混乱しました。 私の生い立ちにはワイルドだった。 彼女が彼女のマナーで私を惹きつけたのか、あるいはおそらく、私が彼女の父親 、私たちのサークルの真剣な権威を賞賛したことが私に影響を与えたかどうかはわかりません。 しかし、私はアンジェラが女の子に利用可能であったので、よりよくアンジェラを知りたかったです。

引っ張らないで

特に私は彼女との最初の関係者ではなかったので、私たちの関係のすべての詳細には触れません 。 アンジェラの言葉には信じられないほどの能力があったので、私は彼女をもっと深く知りたいと思っていました。 しかし、今思い出したように、私はついに頭を失いました。 この日、彼女は最初にフォームを見せてくれました。

待った

一般的に、それは言葉で表せませんでした。 彼女は、私の考えを読んでいるかのように、私が望むことができるすべてをしました。 原始的な入力のスタイルを設定しますか？ 頼む、彼女は飲み込む。

.ng-pristine{ /* */ } .ng-dirty{ /* */ }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

これらのスタイルを適用するコードを記述するだけです。 ここにあります：



[ jsFiddle ]

 <input type="text" ng-model="example">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

誰かがすでに起きた場合

問題は、valid-invalidはどうですか？



[ jsFiddle ]

 .ng-valid{ /* */ } .ng-invalid{ /* */ }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 <input type="email" ng-model="example">
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

一般的に、連中、連中。 彼は彼女に求愛し始めました。 そして、彼女はそれを言わなければならず、完全に明らかにされる。 スタイルを設定することは、初めてデートするだけで楽しいことに気づきました。 実際、彼女は他の人が夢見ることさえできなかった何かをすることができました。 JavaScriptを1行も使わずにカスタムメッセージで検証インターフェイスを作成しますか？ 作成者：



[ jsFiddle ]

 <form name="LovelyForm"> <input type="email" name="LovelyEmail" ng-model="email"/> <span ng-show="LovelyForm.LovelyEmail.$invalid">You break my heart</span> </form>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

そして、スタイルとの完全な類推です。つまり、LovelyForm.LovelyEmailオブジェクトでは、上記のスタイルに対応する論理プロパティが定義されています。

 (boolean) LovelyForm.LovelyEmail.$invalid; (boolean) LovelyForm.LovelyEmail.$valid; (boolean) LovelyForm.LovelyEmail.$dirty; (boolean) LovelyForm.LovelyEmail.$pristine;
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

ジュース自体は、ディレクティブがAngularのボックスに複製され、HTML5フォームの検証の属性を複製することです。



[ jsFiddle ]

 <form name="LovelyForm"> <input type="number" name="LovelyNumber" ng-model="number" min="0" max="10" required/> <span ng-show="LovelyForm.LovelyNumber.$error.required">Show me your number</span> <span ng-show="LovelyForm.LovelyNumber.$error.min">OMG, so min</span> <span ng-show="LovelyForm.LovelyNumber.$error.max">OMG, too max</span> <input type="text" name="LovelyLove" placeholder="I Love U" ng-model="love" ng-pattern="/I love U too/" required /> <span ng-show="LovelyForm.LovelyLove.$error.pattern">What?! Fucking buster!</span> </form>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

個人的には、悪名高いHTML5に欠けていたのは歌の柔軟性が最小限であったため、私は喜びました。

自分のバリデーター

まあ、そして最も重要なことは、アンジェラがあなたの胸に横にあなたが作成したバリデータを受け入れる準備ができていることです。 これを行うには、適切なディレクティブを記述します。



[ jsFiddle ]

 app.directive('mimimi', function() { return { require: 'ngModel', link: function(scope, elm, attrs, ctrl) { ctrl.$parsers.unshift(function(mimimi) { if (/mimimi/.test(mimimi)) { alert('mimimi'); ctrl.$setValidity('mimimi', true); return mimimi.toUpperCase(); } else { ctrl.$setValidity('mimimi', false); return undefined; } }); } }; });
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 <form name="LovelyForm"> <input type="text" name="LovelyMimimi" placeholder="mimimi" ng-model="mimimi" mimimi/> <span ng-show="LovelyForm.LovelyMimimi.$error.mimimi">Mimimi, please</span> <span>{{mimimi}}</span> </form>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

多くの場合、Angular開発者は、プログラミングに精通していない人にも同じ感情を引き起こすコードのフレームワークを作成しようとしたようです。 したがって、特にその本質がかなり単純であるため、何が起こっているのかを少し説明します。



ngModelディレクティブを使用する場合、Angularは特別なNgModelControllerコントローラーのインスタンスを作成します。これは、 基本的にこれらすべての検証プロパティ（$ invalid、$ valid、$ pristine、$ dirty、$ error）を担当します。 したがって、バリデーターを作成するときは、ngModelに属するコントローラーを使用する必要があります。

 require： "ngModel"

これで、変更時に呼び出されるリンク関数は、 NgModelControllerコントローラーをctlパラメーターとして受け入れます。



次に、NgModelControllerオブジェクトの$ parsers配列に目を向けます。これは、入力の内容を渡すことにより、指定された機能を順番に実行します。



正規表現チェックを実行します。 すべてが問題ない場合は、LovelyForm.LovelyMimimiを宣言します。$ Error.mimimiが有効なctrlを設定します。$ SetValidity（ 'mimimi'、true）。 関数によって返される値は、親の$スコープ（この場合はmimimi変数）に渡されます。

サブミティム

最後に、ユーザーから親切に提供されたデータを処理します。 Angularでは、これも時々行われます。



[ jsFiddle ]

 <form name="LovelyForm" novalidate ng-controller="formController" ng-submit="submit()" > <input type="text" name="LovelyText" placeholder="Some Text 1" ng-model="text1" required/> <input type="text" name="LovelyText2" placeholder="Some Text 2" ng-model="text2" required/> <input type="text" name="LovelyText3" placeholder="Some Text 3" ng-model="text3" required/> <input type="submit" value="Send Text" ng-disabled="LovelyForm.$invalid"> </form>
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

 function formController($scope){ $scope.submit=function(){ alert(angular.toJson($scope.LovelyForm)); } }
      
      

        
        
        
      

    
        
        
        
      
      

        
        
        
      

    
     

実際、2つのngSubmitまたはngClickディレクティブのいずれかで十分です。 唯一の違いは、最初にformタグで指定し、2番目にtype = "submit"属性で入力することです。 この場合、指定された機能は、ボタンがクリックされたときと、いずれかのフィールドに入力した後にEnterが押されたときに実行されます。



もちろん、ネイティブHTML5検証メッセージの表示を防ぐために、novalidate属性をフォームに割り当てることをお勧めします。 また、フォームにエラーが入力されたときに送信またはクリックアクションを防ぐために、ngDisabledディレクティブを使用します。 ngDisabledがtrueの場合、送信は失敗します。

既婚

一般的に、私はなぜ男性なのですか。 注意してください。 私は私の人生を生き、手袋のようなjQueryのプラグインを変更しました。 しかし、彼はリラックスして、鼻を突き刺したが、時間内に引き出さなかった。 今、Angelkaと私はすぐに1ページの子供を持つことになりますので、jQueryを見ることができません。 しかし、私はここだけではないと思います。 ご清聴ありがとうございました。