如何聚合幾個字段的ngMessage

我正在使用Angular JS ngMessage指令進行表單驗證，我想聚合幾個字段的ngMessage警報。基本上，我的表單包含3個輸入（日，月，年），我希望在日期無效時顯示警報（無論日期，月份或年份無效）。我怎樣才能做到這一點？我有plunkered我的問題，這裏是我如何使用ngMessage指令：如何聚合幾個字段的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>

來源

2016-11-28 Mouss

可以檢查你的整個形式與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.

來源

2016-11-28 15:23:07 Mistalis

嘗試添加自定義驗證器添加到三個字段中的一個字段並從您的控制器手動觸發（或者將手錶添加到三個日期組件以激活驗證功能）：

<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();

來源

2016-11-28 16:04:59 Vi100

如何聚合幾個字段的ngMessage

回答

相關問題