2017-03-23 68 views
0

我想,如果用戶選擇最新,比同期的旁邊,我的日期選擇器顯示錯誤消息,從最新的和相對的選擇。此消息應僅在用戶單擊提交按鈕後顯示。

代碼:

<form name="form" ng-submit="ctrl.submit(form.$valid)" novalidate> 
 
     <div class="form-group"> 
 
      <md-datepicker name="fromDate" ng-model="ctrl.fromDate" ng-required="ctrl.toDate" md-max-date="ctrl.toDate"></md-datepicker> 
 
     </div> 
 
     <div ng-messages="form.fromDate.$error" ng-if="form.$submitted"> 
 
      <div ng-message="maxdate">From-date should be before to-date</div> 
 
      <div ng-message="required">Fill in from-date</div> 
 
     </div> 
 

 
     <div class="form-group"> 
 
      <md-datepicker name="toDate" ng-model="ctrl.toDate" ng-required="ctrl.fromDate" md-min-date="ctrl.fromDate"></md-datepicker> 
 
     </div> 
 
     <div ng-messages="form.toDate.$error" ng-if="form.$submitted"> 
 
      <div ng-message="mindate">To-date should be after from-date</div> 
 
      <div ng-message="required">Fill in from-date</div> 
 
     </div> 
 

 
     <button type="submit">Submit</button> 
 
    </form>

如果我選擇FROM日期和1/1/2 1/1/1 TODATE然後點擊提交,僅示出所需的錯誤消息。 當檢查$ error對象時,我看到當我單擊提交時mindate/maxdate屬性被清除。

林假設這是由於MD-日期選擇器沒有設置模型值若輸入值根據需要一樣,最小的規則是無效的,最大等

是否有可能解決這個問題不知何故?

編輯: 我認爲問題是角度是使用模型值來應用表單錯誤後單擊提交而不是輸入值。

如果我從日期輸入1/1/2並單擊提交,然後輸入1/1/1作爲toDate,將顯示正確的錯誤消息。

+0

你可以嘗試使用[NG-模式選項(HTTPS://docs.angularjs。 org/api/ng/directive/ngModelOptions)並設置'{allowInvalid:true}'。沒有線索能否解決你的問題,只是猜測。 – George

+0

似乎沒有任何重要的allowInvalid。儘管它確實如此,但我會猶豫不決,因爲它會讓用戶設置像「abc123」這樣的值(對吧?)。想要避免自己處理,如果我可以。 – mTv

+1

是的,我認爲是。我剛剛意識到你的日期選擇器沒有模型,你需要把'ng-model'放在'md-datepicker'元素上 – George

回答

0

似乎當表單加載toDate,fromDate爲空!我對嗎?? 如果toDate和fromDate爲空,則請分別使用dayBeforeDate和currentDate初始化fromDate和toDate。

沒有fromdate - 22March,2017年

TODATE - 23March,2017年

+1

是的,fromDate和toDate在加載頁面時都是「undefined」。雖然初始化它們不會解決任何問題,因爲md-datepicker不允許我改變模型,如果它是一個無效值。 – mTv

+0

Acutally當頁面加載toDate和fromDate驗證進入死鎖時會發生什麼 –