2013-07-01 2 views
7

私は、2つの日付が有効範囲内にあることを確認するために使用するカスタム検証指令を持っています。ユーザーが値を変更したときにディレクティブは正常に動作しますが、AJAXを介して新しいlineItemモデルにロードするとトリガーは発生しません。モデルの変更時にカスタムAngularJSフォームの検証を有効にします

問題は、ユーザーがフォームに無効な日付を入力してエラーをトリガーし、別のlineItemを読み込む可能性があることです。フォームのデータが有効であっても、この時点でフォームにエラーメッセージが表示されます。

Angularのバリデーション(requiredなど)で同じことを試してみると、検証がトリガされて消えます。だから、私の検証トリガーをAngularと同じようにするためには、私は何をする必要がありますか?

(注:私は、フォームの属性、および角度v1.1.5デベロッパーにnovalidateを使用しています)

DIRECTIVE

ngApp.directive("validateBefore", function() { 
    return { 
     require: 'ngModel', 
     link: function (scope, element, attrs, ctrl) { 
      ctrl.$parsers.unshift(function(value) { 
       var before = scope.$eval(attrs.validateBefore); 
       if(value <= before || !before) { 
        ctrl.$setValidity("validateBefore", true); 
        return value; 
       } else { 
        ctrl.$setValidity("validateBefore", false); 
        return undefined; 
       } 
      }); 
     } 
    } 
}); 

TEMPLATE

<div class="date-group"> 
    <span class="date"> 
     <input type="text" class="input-medium" name="starts-at" ng-model="lineItem.startsAt" placeholder="From..." validate-before="lineItem.endsAt"> 
    </span> 

    <span class="date"> 
     <input type="text" class="input-medium" name="ends-at" ng-model="lineItem.endsAt" placeholder="To..." validate-after="lineItem.startsAt"> 
    </span>  
</div> 

CONTROLLER

var lineItem = LineItem.get({ id: lineItemId }, function() { 
    $scope.lineItem = lineItem; 

    if($scope.lineItemForm) { 
     $scope.lineItemForm.$setPristine(); 
    } 
} 

答えて

10

ああ、私は方程式の半分を占めていました。 $parsersは、入力がDOMからモデルに送信されたときに起動します。モデルからDOMにデータを送信する$formattersを追加する必要がありました。 $パーサ後

、私は次のように追加しました:

ctrl.$formatters.unshift(function(value) { 
    var before = scope.$eval(attrs.validateBefore); 
    ctrl.$setValidity("validateBefore", before ? value <= before : true); 
    return value; 
}); 

これは、モデルが変更された瞬間を発射する検証が発生します。詳しくはこちら: http://docs.angularjs.org/guide/formsここではhttp://docs.angularjs.org/api/ng.directive:ngModel.NgModelController#$formatters

+0

ですか?それは私の検証を引き起こすものではありません。 – ovi

+0

それは動作します! @ovi、フォームフィールドに "ng-invalid"というCSSクラスが追加されますが、 "ng-dirty"ではありません。 –

関連する問題