How to show 'invalid date' validation message for AngularStrap datetimepicker

Question

I am able to validate my AngularStrap datetimepicker, but I cannot differentiate between a required validation failure and an invalid date failure. The only error that ever shows on screen is the required error, whether it is required or an invalid string. Is it possible in cases where a string has been entered that is invalid to show a different validation message? Here is my code :

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

What I want is something similar to the ng-pattern check but specific to the datetimepicker.

Answer 1

first of all, I think this has no real link with the date picker or not, if I understand your problem, you are trying to display different messages according to the error that lead to the $invalid for the form

If it's the case, the code you provided will only show a message when the date is invalid (but only because you commented the part for the pattern ;) )

I was super lazy while testing, so I didn't use the datepicker, you'll have to enter a date manually, but I did this fiddle : http://jsfiddle.net/DotDotDot/ELf5A/2/

As I didn't know exactly in what context you were using it, I used different methods to display validation error messages

The HTML part is simple. There is a form, two fields required, one with a pattern check for the date, the other only for the required validation. I added 2 error messages for the date, one displayed when the form hasn't been touched, telling you what format is expected, the other only shows up when the pattern is wrong.

You can click on the button to check the whole validation and then show another message, which will tell you if the form is valid or not, and if not, if it's because of the pattern of the date.

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

The JS part is not very complicated either. When you click on the button, the form is being sent to the validation function, which will actually do all the checks you want, I only did the one corresponding to the pattern, but you could totally check whatever you want about the validation

    $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 ;) 
            }
        }
}

This validation function could totally be used as the trigger in a ng-show/ng-hide too, this is why I also added another function :

    $scope.whatToDisplay=function(aForm){
    if(aForm.$valid)
        return 'valid';
    if(aForm.theDate.$error.pattern)
        return 'date';
    if (aForm.$invalid)
       return 'notdate';
}

This will return a string corresponding to what is happening during the validation, which will be handled with 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>

To summarize a bit, you can use 4 different methods

• A validation function triggered with a click (useful for submit buttons), corresponding to the validation() function in my fiddle

• A function associated with some ng-show, which will automatically watch every change, like the whatToDisplay() function

• The ng-show associated with only the form attributes, like what you were doing with your code

• The class automatically applied to the form ( I didn't explain it, but you can see it in the fiddle, the border change if the pattern is wrong or if it's only invalid )

Sorry, I had some difficulties to make this short, I let you play with the code, it's easier to understand that way, I hope this will help you

Answer 2

You should use ngMessages in AngularJS 1.3 to do the error messaging with less code and complexity. The bs-angular directive creates a message for the "date" string value of ng-message in your list of messages.

<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>            
    </div>
    <div class='alert alert-danger' ng-messages='myForm.BirthDate.$error' 
            ng-if='!myForm.BirthDate.$valid'>
      <div ng-message="date">Please enter a valid date</div>
      <div ng-message="required">Birthdate is required</div>
    </div> 
</div>