如何顯示AngularStrap的'無效日期'驗證信息datetimepicker

我能夠驗證我的AngularStrap datetimepicker，但我無法區分所需的驗證失敗和無效的日期失敗。屏幕上唯一顯示的錯誤是所需的錯誤，無論是需要的還是無效的字符串。如果輸入的字符串無效以顯示不同的驗證消息，是否有可能？這是我的代碼：如何顯示AngularStrap的'無效日期'驗證信息datetimepicker

<div class="control-group" ng-class="{error: form.BirthDate.$invalid}"> 
    <label class="control-label" for="BirthDate">{{'_BirthDate_' | i18n}}</label> 
    <div class="controls"> 
     <input id="BirthDate" name="BirthDate" title="BirthDate" type="text" ng-model="user.BirthDate" data-date-format="dd/mm/yyyy" bs-datepicker required> 
     <span ng-show="form.BirthDate.$dirty && form.BirthDate.$error.required">{{'_BirthDateRequired_' | i18n}}</span> 
     <!--<span ng-show="form.BirthDate.$dirty && form.BirthDate.$error.pattern">{{'_BirthDateInvalid_' | i18n}}</span>--> 
    </div> 
</div>

我想要的東西類似ng模式檢查，但特定於datetimepicker。

來源

2013-07-27 user517406

鏈接到jsfiddle請問 –

首先，我認爲這與日期選取器或不是沒有真正的聯繫，如果我理解你的問題，你想顯示根據錯誤不同的消息是導致$無效的形式

如果是這種情況，你提供的服務將只顯示一條消息，當日期是無效的代碼（但只因爲你評價該模式的一部分;））

我是超級懶同時測試，所以我沒有」 t使用日期選擇器，你必須手動輸入日期，但我做了這個小提琴：http://jsfiddle.net/DotDotDot/ELf5A/2/

由於我不確切知道你在使用什麼背景，我使用了不同的方法來顯示驗證錯誤消息。

HTML部分很簡單。有一個表單，需要兩個字段，一個用於檢查日期的模式，另一個僅用於所需的驗證。我在日期中添加了2條錯誤消息，一條在未被觸摸的情況下顯示，另一條只顯示模式錯誤時顯示的格式。

你可以點擊按鈕來檢查整個驗證，然後顯示另一條消息，它會告訴你表單是否有效，如果沒有，那是因爲日期模式。

<div ng-controller='theCtrl'> 
<form name='theForm'> 
    Enter something here : <input type='text' ng-model='someField' name='someField' required /> <br/> 
Enter a date here : <input type='text' ng-model='theDate' name='theDate' ng-pattern='datePattern' required /> 
    <span ng-show='theForm.theDate.$error.pattern'>Your date format is invalid, please check it again</span> 
    <span ng-show='theForm.theDate.$pristine'>Enter a valid date here : DD/MM/YYYY</span> 
    <br/> <input type='button' ng-click='validation(theForm)' value='Try to validate me!' /> 
    <br /> {{errorMsg}} 
</form> 
</div>

JS部分也不是很複雜。當你點擊按鈕時，表單將被髮送到驗證功能，該功能實際上會執行所有你想要的檢查，我只做了與該模式相對應的檢查，但是你可以完全檢查你想要的任何有關驗證的內容

$scope.validation=function(aForm){ 
    //console.log(aForm) 
     if(aForm.theDate.$error.pattern) 
      $scope.errorMsg='The pattern you entered isn\'t good enough, try again !' 
     else{ 
      if(aForm.$invalid) 
       $scope.errorMsg='Something is invalid, please check all the fields !' 
      else//valid 
      { 
       $scope.errorMsg='Not bad !' 
       alert("good job !") 
       //maybe you can also submit this form here ;) 
      } 
     } 
}

該驗證功能可以完全被用作一個NG-顯示/ NG隱藏太多觸發，這就是爲什麼我還添加了其他功能：

$scope.whatToDisplay=function(aForm){ 
    if(aForm.$valid) 
     return 'valid'; 
    if(aForm.theDate.$error.pattern) 
     return 'date'; 
    if (aForm.$invalid) 
     return 'notdate'; 
}

這將返回對應的字符串是什麼在驗證過程中發生，這將用ng-show處理：

<span ng-show='whatToDisplay(theForm)=="date"'>Displayed if the date is wrong</span> 
<span ng-show='whatToDisplay(theForm)=="notdate"'>This is displayed if the form is invalid, but not because of the date format</span> 
<span ng-show='whatToDisplay(theForm)=="valid"'>Displayed if the form is valid</span>

總結了一下，你可以使用4種不同的方法

一個驗證功能觸發一個點擊（用於提交按鈕），對應的驗證（）函數在我的小提琴
一些NG-顯示相關的功能，它會自動腕錶的每一個變化，像whatToDisplay（）函數
與表格屬性相關聯的ng-show，就像你在用你的代碼所做的一樣
該類自動應用到表單（我沒有解釋它，但你可以在小提琴中看到它，際變化，如果方式是錯誤的，或者如果它只是無效）

對不起，我遇到了一些困難，使這個短暫，我讓你更改代碼，它更容易理解的方式，我希望這將幫助你

來源

2013-07-27 14:54:15 DotDotDot

你能更新ngMessages這個答案嗎？我應該設置什麼'ng-message'屬性值來顯示Angular Strap datepicker驗證消息？ – steampowered

難道你不能只添加ng-pattern =「regex」，然後通過

Invalid date

顯示驗證錯誤消息 – ianstigator

此代碼有助於顯示無效的日期時間錯誤信息

$scope.date=='Invalid Date' 
{ 
    err('Your error message'); 
}

來源

2015-06-09 06:30:40

您應該在AngularJS 1.3中使用ngMessages來以較少的代碼和複雜性來執行錯誤消息傳遞。 bs-angular指令會在消息列表中爲「日期」字符串值ng-message創建消息。

<div class="control-group" ng-class="{error: form.BirthDate.$invalid}"> 
    <label class="control-label" for="BirthDate"> 
     {{'_BirthDate_' | i18n}} 
    </label> 
    <div class="controls"> 
     <input id="BirthDate" name="BirthDate" title="BirthDate" type="text" 
      ng-model="user.BirthDate" data-date-format="dd/mm/yyyy" 
      bs-datepicker required> 
     <span ng-show="form.BirthDate.$dirty && form.BirthDate.$error.required">{{'_BirthDateRequired_' | i18n}}</span>    
    </div> 
    <div class='alert alert-danger' ng-messages='myForm.BirthDate.$error' 
      ng-if='!myForm.BirthDate.$valid'> 
     <div ng-message="date">Please enter a valid date</div> 
     <div ng-message="required">Birthdate is required</div> 
    </div> 
</div>

來源

2015-08-10 21:05:16 steampowered

如何顯示AngularStrap的'無效日期'驗證信息datetimepicker

回答

相關問題