Angularjs验证 - 引导日期选择器输入无法识别 [英] Angularjs validation - bootstrap datepicker input is not recognized

问题描述

如果你看了下面的 Angularjs 验证，你明白：
如果用户交互并没有手工填写日期的消息就会出现。
问题是，当日期使用输入不被认可Angularjs和仍然认为$无效真的充满日期选择器，使消息仍然存在这是令人困惑/问题虽然日期使用日期选择器已经填满！

 ＆LT; D​​IV CLASS =表单组NG-CLASS ={'有错误：！AddForm.Birthdate $无效和放大器;＆安培; AddForm.Birthdate $质朴}＆GT;
     ＆LT;输入类型=文本要求数据提供=日期选择器类=表格控NAME =生日NG模型=生日/＆GT;
     ＆LT;跨度NG秀=$ AddForm.Birthdate无效和放大器;＆安培;！AddForm.Birthdate $原始类=帮助块＆GT;
  生日是必需的。
     ＆LT; / SPAN＆GT;
＆LT; / DIV＆GT;
 

解决方案

您可以验证它之前的表单提交，否则勾上你的日期选择器的监听器手动设置模型属性生日值。

这似乎引导日期选择是建立在JQuery的日期选择器的上方，手动设置的值将是一个不好的做法，你可以参考一下：
<一href=\"http://stackoverflow.com/questions/17109850/update-angular-model-after-setting-input-value-with-jquery\">Update使用jQuery 设置输入值后角模型

一个更好的办法是使用一些内置的角度成分，如从的：

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

If you read following Angularjs validations, you understand that: Message will appear if user interacted and did not fill the date manually. The problem is when date is filled using the datepicker the input is not recognized by Angularjs and still consider $invalid true, so the message remains there which is confusing/problem although date is already filled using 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>

解决方案

You can either validate it prior to form submit, or else hook a listener on your datepicker to manually set the model property Birthdate value.

It seems bootstrap datepicker is built on top of JQuery datepicker, manually setting the value would be a bad practice you can refer to: Update Angular model after setting input value with jQuery

a better approach would be to use some built-in angular component such as the ones from:

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

这篇关于Angularjs验证 - 引导日期选择器输入无法识别的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！