3

如果您阅读以下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>
4

4 回答 4

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

于 2015-06-17T17:41:05.103 回答
1

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

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

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

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

它对我有用:)

于 2015-12-05T11:21:19.333 回答
0

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

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

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

于 2016-05-01T19:27:19.757 回答
0

我以前的答案是基于解决方法，因为在回答的时候我对 Angular 还是很陌生，现在我建议不要在 Angular 项目中使用构建在 Jquery 之上的库。相反，更喜欢角度库。

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

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

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

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

于 2016-07-24T06:14:27.090 回答