2016-04-14 9 views
1

こんにちは私は、ページ間で多くのフォーム検証が必要なアプリケーションを実行しています。そのため、コントローラ間で使用しているサービスから検証パターンを取得しようとしています。サービスから変数としてng-pattenを取得する

ここでの問題は、正しい電子メールアドレスを入力したときにng-patternが正しい方法で反応しないことです。

これはplunkerであり、ここで、私は問題がときの角度は内部のパターンを描画することであるかもしれないと仮定し、フォームのコード

<form method="POST" action="#" name="newsletterForm" id="newsletterForm" ng-controller="newsletterForm" novalidate> 
     <input ng-pattern="/{{patterns.email}}/" type="email" name="email" ng-model="email" required /> 
     <button type="submit">Invia</button> 
     {{newsletterForm.email.$error.pattern}} 
    </form> 

これはapp.jsコード

var app = angular.module('plunker', []); 
app.controller('MainCtrl', function(){}); 
app.service('validationPatterns', function() { 
    this.getPatterns = function() { 
     return { 
      email: "^([a-zA-Z0-9\'\.\-\_]{2,64})([\@]{1})([a-zA-Z0-9\.\-\_]{2,64})([\.]{1})([a-zA-Z]{2,16})$" 
     } 
    } 
}); 
app.controller('newsletterForm', function($scope, validationPatterns){ 
    $scope.patterns = validationPatterns.getPatterns(); 
}); 

あります入力タグはバックスラッシュをエスケープしてレンダリングします

^([a-zA-Z0-9'.-_]{2,64})([@]{1})([a-zA-Z0-9.-_]{2,64})([.]{1})([a-zA-Z]{2,16})$ 

私はすでにtrサービスで二重バックスラッシュを追加して、角度を正しくレンダリングするようにしましたが、まだ動作していません。 アイデア

+0

plunkerは固定 –

+0

空であるべきです。ありがとう。 https://plnkr.co/edit/g0c9yWrLg2Nws9B4nxI1?p=preview –

答えて

0

ng-patternは、$scope変数で動作します。あなたのケースでは、

<input ng-pattern="patterns.email" 

更新plunker

+0

あなたはすばらしく、私はばかです。どうもありがとう。 –

関連する問題