最近、手元に維持されているコンポーネントの残りのバグはフォーム検証であり、会社のフォーム検証コード内のロジックは何世代にもわたって不明であり、コード構造はそれほど角度はありません。
フォーム検証を詳細に理解することが非常に必要です。
<body ng-controller = "maincontroller"> <form name = "form" novalidate = "novalidate"> <input name = "text" type = "email" ng-model = "name"> </form> </body>
Ngmodelは角度の黒い魔法であり、双方向の結合を実現します。名前の値が変更されると、入力値も変更されます。
ユーザー入力が値を変更すると、名前の値も変更されます。
Novalidate = "Novalidate"の目的は、システムに付随するフォーム検証を削除することです。
上記のコードを解析した後、Angularは、MainControllerの$スコープの下で変数「フォーム」と$ scope.formを生成します。この変数の名前は、form.name in htmlと同じです。
$ scope.form.textは、ngmodelControllerから継承されたテキスト入力ボックスのモデルです。
ここで、$ scope.formインスタンスはformcontrollerからです。そのコンテンツは次のとおりです。
テキスト入力ボックスのモデル（つまり、$ scope.form.text）は次のとおりです。
$ dirty/$ pristine、$ valid/$ invalid、$ errorは一般的な属性です。特に$エラー。
最も簡単なフォーム検証：
フォームと入力ボックスを理解した後、最初に最も簡単なコマンドを編集してエラーを表示できます。
HTMLコンテンツは次のとおりです。
<form name = "form" novalidate = "novalidate"> <input name = "text" type = "email" ng-model = "name" error-tip> </form>
コマンドコードは次のとおりです。
//入力ボックスエラーが発生すると、エラーがディレクティブ（ "errortip"、function（$ compile）{return {restrict： "a"、required： "ngmodel"、link：function（$ element、$ attrs、$ ngmodel）{// spascope = $ scope。 ng-if = "haserror（）"> {errors（）|。 {email：true、xxx：true、xxxx：trie} $ scope.errors = function（）{return $ ngmodel。$ error;} //間違った命令をコンパイルし、$ element.after.after（$ compile（tip）（subscope））;}}}}）;最初に実行結果を見てみましょう。
無効なメールアドレスを入力するとき：
正しいメールアドレスを入力するとき：
ERRORTIPディレクティブは、ngmodelControllerをrequire： "ngmodel"を介して取得することから始まります。次に、エラーを入力ボックスに表示する要素を作成します。
$コンパイルはここで使用され、$コンパイルはHTMLコンテンツを動的にコンパイルおよび表示するために使用されます。
エラーコンテンツがある場合、間違った要素が表示されます。
SubscopeがHaserrorおよびエラーにアクセスできるのはなぜですか？
プロトタイプチェーンのため。知るために下の写真を見てください。
エラーコンテンツをカスタマイズします
OK、フォーム検証が現在利用できないことは明らかです。表示するエラーコンテンツをカスタマイズする必要があり、表示するエラーが複数あります。
ng-repeatを使用して複数のエラーを表示します。つまり、「errortip」コマンドを使用します
tip = '<span ng-if = "haserror（）"> {{errors（）| json}} </span> ';変更：
tip = '<ul ng-if = "haserror（）" ng-repeat = "（errorkey、errorvalue）in errors（）">' +'<span ng-if = "errorvalue"> {{errorkey | errorfilter}} </span> ' +' </ul> ';ここで、ErrorFilterはエラーメッセージのカスタム表示のフィルターです。フィルターは実際には関数です。
コードは次のとおりです。
.filter（ "errorfilter"、function（）{return function（input）{var errormessagemap = {email： "正しい電子メールアドレスを入力してください"、xxoo： "子供には適していない"} return errormessmap [input];}}）;結果は次のとおりです。
わかりました、ここでは「シンプルな」フォーム検証を処理できます。はい、簡単です。私たちはより深く進まなければなりません。
カスタムフォーム検証！
次に、「ハンサムな男」に入力できないフォーム検証を実装しましょう。
指示は次のとおりです。
.Directive（ "donotinputhandsomeboy"、function（$ compile）{return {restrict： "a"、require： "ngmodel"、link：function（$ scope、$ element、$ attrs、$ ngmodel）{$ ngmodel。無効な、$エラーは{handome：true} $ ngmodel。$ setValidity（ "handome"、false）;} return value;}}}}}）になります。結果は次のとおりです。
ここには2つの重要なこと、$ ngmodel。$パーサーと$ ngmodel。$ setvality性。
$ ngmodel。$パーサーは配列です。入力ボックスにコンテンツを入力すると、$パーサーの関数を通過して実行します。
$ ngmodel。$ setValidity（ "Handome"、false）;ハンサムに無効に設定すると、$ ngmodelを設定します。$ error ["handome"] = true;
$ ngmodelを削除します。$$ success ["Handome"]も設定されており、詳細についてはソースコードを検索できます。
ここでは、プロセスを要約します。
- >ユーザー入力
- > Angularはすべての関数を$パーサーで実行します
- > $ setValidity（ "xxoo"、false）を検査します。その後、xxooは$ ngmodelに設定されます。$ error ["xxoo"]
- >次に、errortip命令はng-Repeat $ ngmodel。$エラーになります
- > errorfilterはエラーメッセージから逃げます
- >エラーメッセージが最後に表示されました
入力ボックスの表示コンテンツをカスタマイズします
多くの場合、開発はエラーを確認してエラーを表示するほど簡単ではありません。入力ボックスの内容をフォーマットする必要がある場合があります。
たとえば、「1000」が「1,000」として表示されます
「こんにちは」は「こんにちは」として表示されます
次に、自動イニシャルを実装しましょう。
ソースコードは次のとおりです。
<form name = "form" novelidate = "novalidate"> <input name = "text" type = "text" ng-model = "name" upper-case> </form> .directive（ "uppercase"、function（）{return {制限： "a"、require： "ngmodel"、link：function（$ scope、$ element、$ attrs、$ ngmodel）{$ ngmodel。$ parsers.push（value）{var viewvalue; if（angular.isundefined（value））{viewvalue = "" ViewValue [0] .touppercase（） + ViewValue.Substring（1）; //インターフェイスコンテンツを設定します。$ setViewValue（ViewValue）;ここでは、$ setViewValueと$ render、$ setViewValueを使用して、ViewValueを指定された値に設定し、$ renderはインターフェイスにViewValueを表示します。
多くの人々は、$ setViewValueを使用するとインターフェイスを更新できると考えていますが、$ renderを使用しておらず、最終的にはインターフェイスが何をしても更新されていません。
$ ngmodel。$パーサーだけでは不十分な場合、$パーサーは、ユーザーが入力ボックスに新しいコンテンツを入力するときにのみトリガーされます。別の状況は、入力ボックスのコンテンツを更新する必要があることです。
それは双方向の結合です。たとえば、入力ボックスは、MainControllerの$ scope.nameにバインドされています。ユーザーが$ scope.nameを他の方法で「hello」に変更すると、最初の文字の大文字は入力ボックスに表示されません。
現時点では、$フォーマッタを使用する必要があるため、最初に例を見てみましょう。
<body ng-controller = "maincontroller"> <form name = "form" novalidate = "novalidate"> <button ng-click = "random（）"> random </button> <input name = "text" type = "text" ng-model = "name" upper-case> </form> </body
MainControllerコンテンツ：
angular.module（ "app"、[]）。コントローラー（ "maincontroller"、function（$ scope、$ timeout）{$ scope.random = function（）{$ scope.name = "hello" + math.random（）;}}）簡単です。ボタンをクリックすると、$ scope.nameはhelloで始まるランダムコンテンツになります。
こんにちはの最初の手紙が私たちが望むものではなく、大文字ではないことは明らかです。
次のコマンドのコンテンツを変更します。
.directive（ "appercase"、function（）{return {restrict： "a"、require： "ngmodel"、link：function（$ scope、$ element、$ attrs、$ ngmodel）{$ ngmodel $ ngmodel。$ setViewValue（ViewValue）; //インターフェイスにレンダリング、この関数は非常に重要です$ ngmodel。$ render（）;}）//関数$ ngmodel。文字列関数handleEmptyValue（value）{return angular.isundefined（value）： "" + value;}総括する：
1。
- >ユーザーは入力ボックスにコンテンツを入力します
- > $ ngmodelの関数の角度トラバーサル。$パーサーは入力コンテンツを変換し、$ ngmodel。$ modelvalueに設定します。
- > $ ngmodel。$パーサーアレイの関数では、$ ngmodel。$ viewValueを変更し、$ ngmode。$ render（）を変更します。
2。
- >ボタンを介してランダムな文字列を生成して名前に設定します
- >ダーティ検出が$ ngmodel。$ modelValueと矛盾するかどうかを決定するたびに、$ watchを使用して実装されます）。一貫性のない場合は、すべての関数を$ formatersで逆順序で実行して実行し、最終的な返品値を$ ngmodelに割り当てます。$ ViewValue
- >入力ボックスのコンテンツを更新します
「入力ボックスの表示コンテンツをカスタマイズする」例を最適化できますか？
なぜ最適化するのですか？
その理由は非常に簡単です。 「カスタムコンテンツ」を実装するには、$パーサーと$フォーマッタが使用されます。実際、2つのコンテンツは非常に似ています！これは非常に重要です。
最適化する方法は？
$ ngmodel。$ validatorsを使用します。
わかりました、今、例を変更します。
.directive（ "appercase"、function（）{return {restrict： "a"、require： "ngmodel"、link：function（$ scope、$ element、$ attrs、$ ngmodel）{// 1.3がサポートされています。 uppercasefirstword（handeremptyvalue（modelvalue））; //インターフェイスコンテンツを設定します$ ngmodel。$ setViewValue（viewValue）; //インターフェイスにリソースが非常に重要です。この関数は非常に重要です。 handleEmptyValue（value）{return angular.isundefined（value）： "" + value;}コードははるかにシンプルで、$ ngmodel。$のバージョンのバージョン1.3以降のみでサポートされています。
$ ngmodelの返品値。$ validators.uppercase関数がfalseの場合、$ ngmodel。$ error ['appercase'] = true。これは、$ ngmodel。$ setVality（ "大文字"、false）に似ています。