在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）

回答

相关问题