角度輸入有效手動

我正在使用引導日期選擇器。當我點擊圖標日期&時自動進入輸入。但輸入仍然無效，因爲我沒有直接與它進行交互。有任何一個人面臨這個問題。角度輸入有效手動

這裏是該plnkr：http://plnkr.co/edit/yBmwZCCPvTOQWE6q3BW5

視圖

<body data-ng-controller="ReservationController as resvnCtrl"> 
    <div class="container"> 
    <div class="col-lg-6 col-lg-offset-3 col-md-8 col-md-offset-2 col-sm-12 col-xs-12 "> 
     <div> 
      <h2 class="text-center page-heading">Make a reservation</h2> 
     </div> 
     <div> 
      <form role="form" name="resvnCtrl.form" data-ng-submit="resvnCtrl.submitForm(resvnCtrl.form.$valid)" novalidate> 
       <div class="form-group" data-ng-class="{'has-error':resvnCtrl.form.time.$invalid && (resvnCtrl.form.time.$dirty || resvnCtrl.form.$submitted) }"> 
        <label class="control-label">Date-Time</label> 
        <div class='input-group date' id='datetimepicker'> 
         <input type="text" name="time" id="time" data-ng-model="resvnCtrl.reservation.time" 
           placeholder="Enter Desired Time" class="form-control" required> 
         <span class="input-group-addon pointer" data-date-picker> 
          <i class="fa fa-calendar"></i> 
         </span> 
        </div> 
        <div data-ng-messages="resvnCtrl.form.time.$error" data-ng-if="resvnCtrl.form.time.$dirty || resvnCtrl.form.$submitted"> 
         <p class="help-block" data-ng-message="required">Date and Time required</p> 
        </div> 
       </div> 

       <div class="form-group"> 
        <div class="col-sm-4 col-sm-offset-2"> 
         <input type="submit" name="submit" id="submit" value="Make Reservation" class="btn btn-primary btn-block " > 
        </div> 
       </div> 
      </form> 
     </div> 
    </div> 
</div> 

</body>

控制器

var app = angular.module('plunker', []); 

angular.module('plunker') 
     .controller('ReservationController',ReservationController); 

    ReservationController.$inject=['$scope']; 
    function ReservationController($scope) { 

     var resvnCtrl=this; 
     resvnCtrl.reservation={}; 
     resvnCtrl.confirmation={}; 
     $('#datetimepicker').datetimepicker(); 

     resvnCtrl.submitForm=function(isValid){ 

       alert("valid:"+resvnCtrl.form.time.$valid); 
     } 
    }

來源

2015-11-05 Lokesh Cherukuri

我覺得你可以參考角帶：http://mgcrea.github.io/angular-strap/#/datepickers。當您將angular-strap.min.js，angular-strap.tpl.min.js和libs.min.css導入到index.html時。你的app.js應該是這樣的：

var app = angular.module('plunker', ['mgcrea.ngStrap.datepicker']);

來源

2015-11-05 07:35:47

這是在角度內使用jQuery的詛咒。初始化插件並且不觸發摘要時，您的模型控制器僅更新$viewValue。摘要觸發了我的另一個動作 - 重點進入或退出即運行摘要。

解決方案爲這是觀察者，將手動設置$modelValue由$setViewValue()方法，角度將知道發生了什麼事，並更新驗證。

而且請爲datepicker創建單獨的指令，它將在您使用指令的元素上初始化它。

來源

2015-11-05 08:07:20 Appeiron

我從來沒有使用過這些$ modelValue，$ setViewValue（）。你可以發佈一個例子或更新我的plunker –

角度輸入有效手動

回答

相關問題