DOM操作やjQueryを使わずにAngularJSで電子メールやパスワードの確認を行う指示をするにはどうすればよいですか？

私はAngularJSでパスワード/電子メールの確認指令を作成したいと思いますが、これまでに見たことのあるものは、DOMを大量に掘り下げたり、jQueryを利用したりしています。私ができるならば$ scopeのプロパティだけに依存したいと思います。それを行う最善の方法は何ですか？DOM操作やjQueryを使わずにAngularJSで電子メールやパスワードの確認を行う指示をするにはどうすればよいですか？

出典

2013-07-04 JoshGough

この種のディレクティブを実装するための多くの有用な方法を見て、DOM操作やjQueryを使用せずに行う方法を考え出しました。ここにはPlunk that shows howがあります。

それは使用することを含む：入力フィールド

$パース（expr）は（スコープ）と、単純な範囲の両方のための$の範囲に

NG-モデルプロパティを$式を見る - 評価します。マッチ属性ディレクティブを追加するコントロールの$ modelValueに対して現在のスコープのコンテキストで "match"プロパティを使用します。
$ invalidプロパティが基になるフォームでtrueの場合、送信ボタンを無効にします。

これは一部の人には便利だと思います。ここでは要点です：

var app = angular.module('app', [], function() {}); 

app.directive('match', function($parse) { 
    return { 
    require: 'ngModel', 
    link: function(scope, elem, attrs, ctrl) { 
     scope.$watch(function() {   
     return $parse(attrs.match)(scope) === ctrl.$modelValue; 
     }, function(currentValue) { 
     ctrl.$setValidity('mismatch', currentValue); 
     }); 
    } 
    }; 
}); 

app.controller('FormController', function ($scope) { 
    $scope.fields = { 
    email: '', 
    emailConfirm: '' 
    }; 

    $scope.submit = function() { 
    alert("Submit!"); 
    }; 
});

次に、HTMLで：

<!DOCTYPE html> 
    <html ng-app="app"> 
     <head lang="en"> 
     <meta charset="utf-8"> 
     <title>Custom Plunker</title> 
     <link rel="stylesheet" href="style.css"> 
     <script src="//ajax.googleapis.com/ajax/libs/angularjs/1.0.7/angular.min.js"></script> 
     <script src="app.js"></script> 
     </head> 
     <body ng-controller="FormController"> 
     <form name='appForm' ng-submit='submit()'> 
      <div class="control-group"> 
      <label class="control-label required" for="email">Email</label> 
      <div class="controls"> 
       <input id="email" name="email" ng-model="fields.email" 
    class="input-xlarge" required="true" type="text" /> 
       <p class="help-block">[email protected]</p> 
      </div> 
      </div> 
      <div class="control-group"> 
      <label class="control-label required" for="emailConfirm">Confirm Email</label> 
      <div class="controls"> 
       <input name="emailConfirm" ng-model="fields.emailConfirm" 
    class="input-xlarge" required="true" 
       type="text" match="fields.email" /> 
       <div ng-show="appForm.emailConfirm.$error.mismatch"> 
       <span class="msg-error">Email and Confirm Email must match.</span> 
       </div> 
      </div> 
      </div> 
      <button ng-disabled='appForm.$invalid'>Submit</button> 
     </form> 
     </body> 
    </html>

出典

2013-07-04 17:24:07 JoshGough

ええと、なぜdownvote？それ以外に "あなた自身の質問に答える/知識を共有する"機能があります。 Sheesh。 – JoshGough

あなたの意見は分かりません。どのようにすればいいのですか？質問をするときは、自分で答えることができれば知識を広めるように指定します。 – JoshGough

参照先：http://blog.stackoverflow.com/2011/07/its-ok-to-ask-and-answer-your-own-questions/ – JoshGough

これは私のためによく働く：

ディレクティブ：

angular.module('myApp').directive('matchValidator', [function() { 
     return { 
      require: 'ngModel', 
      link: function(scope, elm, attr, ctrl) { 
       var pwdWidget = elm.inheritedData('$formController')[attr.matchValidator]; 

       ctrl.$parsers.push(function(value) { 
        if (value === pwdWidget.$viewValue) { 
         ctrl.$setValidity('match', true);        
         return value; 
        }       

        if (value && pwdWidget.$viewValue) { 
         ctrl.$setValidity('match', false); 
        } 

       }); 

       pwdWidget.$parsers.push(function(value) { 
        if (value && ctrl.$viewValue) { 
         ctrl.$setValidity('match', value === ctrl.$viewValue); 
        } 
        return value; 
       }); 
      } 
     }; 
    }])

使い方

を

<input type="email" ng-model="value1" name="email" required> 
<input type="email" ng-model="value2" name="emailConfirm" match-validator="email" required>

表示エラー

<div ng-if="[[yourFormName]].emailConfirm.$error"> 
    <div ng-if="[[yourFormName]].emailConfirm.$error.match"> 
     Email addresses don't match. 
    </div> 
</div>

出典

2014-08-19 23:32:21 Jarrod

他の開発者がどのように動作するかを見ることができるように、フィドルを提供できますか？ありがとう –

DOM操作やjQueryを使わずにAngularJSで電子メールやパスワードの確認を行う指示をするにはどうすればよいですか？

答えて

関連する問題