Angularjs 验证 - bootstrap 无法识别日期选择器输入

Question

如果您阅读以下 Angularjs 验证，您就会明白：如果用户交互但未手动填写日期，则会显示消息。问题是当使用日期选择器填充日期时，Angularjs 无法识别输入并且仍然认为 $invalid 为真，因此消息仍然存在 confusing/problem 尽管日期已经使用日期选择器填充！

<div class="form-group" ng-class="{ 'has-error' : AddForm.Birthdate.$invalid && !AddForm.Birthdate.$pristine }"> 
     <input type="text"  required data-provide="datepicker"  class="form-control" name="Birthdate" ng-model="Birthdate"  />
     <span ng-show="AddForm.Birthdate.$invalid  && !AddForm.Birthdate.$pristine" class="help-block" >
  Birthdate is required.
     </span>
</div>

Answer 1

您可以在提交表单之前对其进行验证，或者在您的日期选择器上挂接一个侦听器以手动设置模型属性出生日期值。

似乎bootstrap日期选择器是建立在JQuery日期选择器之上的，手动设置值是一种不好的做法，您可以参考： Update Angular model after setting input value with jQuery

更好的方法是使用一些内置的 angular 组件，例如来自：

https://angular-ui.github.io/bootstrap/ http://dalelotts.github.io/angular-bootstrap-datetimepicker/ https://github.com/dalelotts/angular-bootstrap-datetimepicker

Answer 2

我发现了解决这个问题的新方法-

首先为该输入框创建一个 id，然后创建一个函数 $scope.assign()，它只是将 id 值分配给该输入的模型。像这样的东西-

$scope.assign = function() {
$scope.modelValue = $('#idName').val();
}

现在使用 ng-bind="assign()" 到您的输入框。

它对我有用:)

Answer 3

遇到了这个问题，这是因为您使用的选择器是建立在 Jquery 之上的，在更新时仍然无法被范围检测到。

对于我的新项目，我添加了另一个库，它非常棒。请参阅文档 http://dalelotts.github.io/angular-bootstrap-datetimepicker

提供我添加了包装器指令的代码段

Answer 4

我之前的回答是基于变通方法，因为在回答那个时候我对 angular 还很陌生，现在我建议不要使用构建在上面的库Angular 项目中的 Jquery。相反，更喜欢 angular 个库。

进入主题- 对于日期时间选择器，我找到了一个非常好的库

https://github.com/indrimuska/angular-moment-picker

您可以在内置 angular 中找到更多库，但我发现它对其他验证也非常有用，例如最小日期、最大日期验证。

使用这个库肯定会解决验证问题，而且它是纯粹的 Angular 方式。

Angularjs 验证 - bootstrap 无法识别日期选择器输入

Angularjs validation - bootstrap datepicker input is not recognized

datepicker

twitter-bootstrap

angularjs

bootstrap-datepicker

angularjs-validation