複数のフィールドのngMessageを集計する方法

Question

フォームの検証にAngular JS ngMessageディレクティブを使用しています。いくつかのフィールドのngMessageアラートを集計したいと思います。基本的には、私のフォームは3つの入力（曜日、月、年）を含んでいて、日付が有効でないときに警告を表示したい（それが有効でない日、月または年であっても）。どうやってやるの？私はここで、plunkered私の問題を持っている私はngMessageディレクティブを使用する方法である：

<form name="messageAnimationForm"> 
    <label for="day">Day</label> 
    <input ng-model="day" id="day" name="day" ng-minlength="1" ng-maxlength="2" required class="ngMessageSample" ng-pattern="/^\d+$/"/> <br/><br/> 
    <label for="month">Month</label> 
    <input ng-model="month" id="month" name="month" ng-minlength="1" ng-maxlength="2" required class="ngMessageSample" ng-pattern="/^\d+$/"/><br/><br/> 
    <label for="year">Year</label> 
    <input ng-model="year" id="year" name="year" ng-minlength="4" ng-maxlength="4" required class="ngMessageSample" ng-pattern="/^\d+$/"/><br/><br/> 

    <div> 
    <div ng-messages="messageAnimationForm.day.$error" class="ngMessagesClass" ng-messages-multiple> 
     <div ng-message="pattern" class="ngMessageClass">* This field is invalid, only numbers are allowed</div> 
     <div ng-message="required" class="ngMessageClass">* Day is mandatory</div> 
    </div> 

    <div ng-messages="messageAnimationForm.month.$error" class="ngMessagesClass" ng-messages-multiple> 
     <div ng-message="pattern" class="ngMessageClass">* This field is invalid, only numbers are allowed</div> 
     <div ng-message="required" class="ngMessageClass">* Month is mandatory</div> 
    </div> 

    <div ng-messages="messageAnimationForm.year.$error" class="ngMessagesClass" ng-messages-multiple> 
     <div ng-message="pattern" class="ngMessageClass">* This field is invalid, only numbers are allowed</div> 
     <div ng-message="required" class="ngMessageClass">* Year is mandatory</div> 
    </div> 
    </div> 
</form> 

Answer 1

messageAnimationForm.$errorとエラーとしてあなたの全体の形かどうかをチェックすることができます：

<div ng-messages="messageAnimationForm.$error" class="ngMessagesClass" ng-messages-multiple> 
    <div ng-message="pattern" class="ngMessageClass">* A field is invalid, only numbers are allowed</div> 
    <div ng-message="minlength" class="ngMessageClass">* It's mandatory at least 1 characters</div> 
    <div ng-message="maxlength" class="ngMessageClass">* It's mandatory at most 2 characters</div> 
</div> 

Forked your Plunker here.

Answer 2

は、カスタムを追加してみてくださいvalidatorを3つのフィールドのいずれかに追加し、コントローラから手動で起動します（または、検証機能を起動する3つの日付コンポーネントに時計を追加します）。

<form name="messageAnimationForm"> 
<div ng-messages="messageAnimationForm.year.$error" class="ngMessagesClass" ng-messages-multiple> 
    <div ng-message="invalidDate" class="ngMessageClass">Date not valid</div> 
</div> 
</form> 

コントローラでは、カスタムルールで日付の有効性をチェックする必要があります。メッセージを表示する場合は、カスタムエラーをtrueに設定する必要があります（非表示にするには「false」に設定する必要があります）。

$scope.messageAnimationForm.year.$error.invalidDate = checkIfYourDateIsValid();