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

Question

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

<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

您可以在提交表单之前验证它，或者在您的日期选择器上挂接一个监听器以手动设置模型属性 Birthdate 值。

bootstrap datepicker 似乎是建立在 JQuery datepicker 之上的，手动设置值是一个不好的做法，你可以引用: 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