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

Posted 2023-05-07

【中文标题】Angularjs验证 - 无法识别引导日期选择器输入

【英文标题】：Angularjs validation - bootstrap datepicker input is not recognized

【发布时间】：2015-09-03 02:22:06

【问题描述】：

如果您阅读以下Angularjs 验证，您就会明白： 如果用户进行了交互并且没有手动填写日期，则会出现消息。 问题是当使用 datepicker 填充日期时，Angularjs 无法识别输入并且仍然认为 $invalid true，因此尽管已经使用 datepicker 填充了日期，但仍然存在令人困惑/问题的消息！

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

【参考方案1】：

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

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

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

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

【讨论】：

我无法执行您建议的第一个解决方案，因为在用户键入时其他字段正在使用验证。对于第二种解决方案，你能帮我做吗？

感谢更新。我喜欢 angularjs 之一。我发现安装它有困难。我在这里发布了帮助：***.com/questions/30910267/…

【参考方案2】：

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

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

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

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

它对我有用:)

【参考方案3】：

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

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

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

【参考方案4】：

我的上一个答案是基于解决方法，因为在那个时候我对 Angular 还是很陌生，现在我建议不要在 Angular 项目中使用基于 Jquery 构建的库。而是更喜欢 Angular 库。

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

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

您可以在 Angular 中找到更多内置库，但我发现它对于其他验证也非常有用，例如 min-date、max-date 验证。

使用这个库肯定会解决验证问题及其纯粹的 Angular 方式。