我能够验证我的Angularstrap datetimepicker,但我无法区分所需的验证失败和无效的日期失败.屏幕上显示的唯一错误是所需的错误,无论是必需的还是无效的字符串.如果输入的字符串无效以显示不同的验证消息,是否可能?这是我的代码:
<div class="control-group" ng-class="{error: form.BirthDate.$invalid}"> <label class="control-label" for="BirthDate">{{'_BirthDate_' | i18n}}</label> <div class="controls"> <input id="BirthDate" name="BirthDate" title="BirthDate" type="text" ng-model="user.BirthDate" data-date-format="dd/mm/yyyy" bs-datepicker required> <span ng-show="form.BirthDate.$dirty && form.BirthDate.$error.required">{{'_BirthDaterequired_' | i18n}}</span> <!--<span ng-show="form.BirthDate.$dirty && form.BirthDate.$error.pattern">{{'_BirthDateInvalid_' | i18n}}</span>--> </div> </div>
我想要的是类似于ng-pattern检查的东西,但特定于datetimepicker.
解决方法
首先,我认为这与日期选择器没有真正的联系,如果我理解你的问题,你试图根据导致表单$invalid的错误显示不同的消息
如果是这种情况,您提供的代码只会在日期无效时显示一条消息(但仅因为您为该模式注释了该部分;))
我在测试时非常懒,所以我没有使用datepicker,你必须手动输入日期,但我做了这个小提琴:http://jsfiddle.net/DotDotDot/ELf5A/2/
由于我不确切知道您使用它的上下文,我使用不同的方法来显示验证错误消息
HTML部分很简单.有一个表单,需要两个字段,一个用于检查日期,另一个用于所需的验证.我为日期添加了2条错误消息,一条在未触摸表单时显示,告诉您预期的格式,另一条仅在模式错误时显示.
您可以单击按钮检查整个验证,然后显示另一条消息,它将告诉您表单是否有效,如果没有,是否因为日期模式.
<div ng-controller='theCtrl'> <form name='theForm'> Enter something here : <input type='text' ng-model='someField' name='someField' required /> <br/> Enter a date here : <input type='text' ng-model='theDate' name='theDate' ng-pattern='datePattern' required /> <span ng-show='theForm.theDate.$error.pattern'>Your date format is invalid,please check it again</span> <span ng-show='theForm.theDate.$pristine'>Enter a valid date here : DD/MM/YYYY</span> <br/> <input type='button' ng-click='validation(theForm)' value='Try to validate me!' /> <br /> {{errorMsg}} </form> </div>
JS部分也不是很复杂.单击按钮时,表单将被发送到验证功能,该功能实际上将执行您想要的所有检查,我只做了与模式相对应的检查,但您可以完全检查您对验证的任何需求
$scope.validation=function(aForm){ //console.log(aForm) if(aForm.theDate.$error.pattern) $scope.errorMsg='The pattern you entered isn\'t good enough,try again !' else{ if(aForm.$invalid) $scope.errorMsg='Something is invalid,please check all the fields !' else//valid { $scope.errorMsg='Not bad !' alert("good job !") //maybe you can also submit this form here ;) } } }
此验证功能也可以完全用作ng-show / ng-hide中的触发器,这就是为什么我还添加了另一个功能:
$scope.whatTodisplay=function(aForm){ if(aForm.$valid) return 'valid'; if(aForm.theDate.$error.pattern) return 'date'; if (aForm.$invalid) return 'notdate'; }
这将返回与验证期间发生的事件相对应的字符串,该字符串将使用ng-show处理:
<span ng-show='whatTodisplay(theForm)=="date"'>displayed if the date is wrong</span> <span ng-show='whatTodisplay(theForm)=="notdate"'>This is displayed if the form is invalid,but not because of the date format</span> <span ng-show='whatTodisplay(theForm)=="valid"'>displayed if the form is valid</span>
总结一下,您可以使用4种不同的方法
>通过单击触发的验证功能(对提交按钮很有用),对应于我的小提琴中的validation()函数
>与某些ng-show相关联的功能,它将自动观察每个变化,例如whatTodisplay()函数
> ng-show仅与表单属性相关联,就像您对代码所做的那样
>该类自动应用于表单(我没有解释它,但你可以在小提琴中看到它,如果模式错误或者它只是无效的边框更改)