在datetimepicker（引導程序）中更改後將表單設置爲髒狀態（AngularJS）

我的網頁上有一個Bootstrap 3 DateTimePicker輸入，我試圖在對現有數據進行更改時啓用「編輯」按鈕。問題是，使用datatimepicker更改日期時間並不會將我的表單標記爲「髒」，因此按鈕將永久變爲灰色。我知道如何使用JQuery捕獲datatime change事件，但我不知道如何訪問'myForm'來將其狀態更改爲dirty。在datetimepicker（引導程序）中更改後將表單設置爲髒狀態（AngularJS）

<form ng-submit="myCtrl.submit()" name="myForm" class="form-horizontal"> 
    <label class="col-md-2 control-label" for="date">Date:</label> 
     <div class="col-md-7"> 
      <div class="input-group date" id='datetimepicker'> 
       <input class="form-control" name="date" id="datetimepicker1" placeholder="select date"> 
       <span class="input-group-addon"> 
        <span class="glyphicon glyphicon-calendar"></span> 
       </span> 
      </div> 
     </div> 
     <script type="text/javascript"> 
      $(function() { 
       $('#datetimepicker').datetimepicker({ 
       }); 
      }); 
      $("#datetimepicker").on("dp.change", function(e) { 
       //CODE TO set myForm to 'dirty' state. 
      }); 
     </script> 
</form>

來源

2017-02-27 TheOmniano

您可以使用一般形式[formName].$setDirty()手動設置它。所以對你而言，這將是：myForm.$setDirty()。

來源

2017-02-27 18:43:20 Lex

在那個解決方案中，我有'Uncaught TypeError：myForm。$ setDirty不是一個函數' – TheOmniano

啊，我錯過了你使用jQuery。我會建議使用[專門爲Angular設計的UI Bootstrap指令]（https://angular-ui.github.io/bootstrap/#!#datepickerPopup），並避免在Angular中使用jQuery。 – Lex

爲什麼你不試着設置一個指令來處理jQuery的東西？

mainModule.directive('datePickerHandler', function() { 
return { 
    restrict: 'A', 
    link: function (scope, el) { 
     angular.element(document).ready(function() { 
      $(el).datetimepicker({}).on('dp.change', function(e) { 
       scope.myForm.$setDirty(); 
      }); 
     }); 
    } 
} 
});

然後，您可以訪問範圍指令，如窗體。

來源

2017-02-27 20:42:50

在datetimepicker（引導程序）中更改後將表單設置爲髒狀態（AngularJS）

回答

相關問題