4

I have a form with many fields, including several datepickers (Angular UI Bootstrap). 

<div name="mainForm" ng-form>
    <div class="form-group">
        <p class="input-group">
            <input type="text" name="dt" 
                   class="form-control"
                   ng-model="dt"
                   is-open="opened" 
                   datepicker-popup="MM/dd/yyyy" />
            <span class="input-group-btn">
                <button type="button" class="btn btn-default" ng-click="open($event)"><i class="glyphicon glyphicon-calendar"></i></button>
            </span>
        </p>
    </div>
    <p class="text-danger" ng-show="mainForm.$invalid">Invalid!</p>
</div>

I'm using Angular validation w/ the form. We have some required fields, but the dates are not. If you enter a date and remove it, it marks the form invalid. I created a Plunkr to demonstrate this.

Is there a way around this?

Note: It also logs this error in the console when you clear the date out.

Datepicker directive: "ng-model" value must be a Date object, a number of milliseconds since 01.01.1970 or a string representing an RFC2822 or ISO 8601 date.

What-About-Bob
  • 649
  • 5
  • 13

1 Answers1

0

In the current version of the code there is a $datepickerSuppressError value that you can set to true which will hide the console error. You can see in the code that it checks if the date is NaN and then displays the console error if $datepickerSuppressError is still false.

However, having said that, there is still a way to work around the issue of the form being invalid. You will just need to add an additional check to see if mainForm.$error.date is set, or something similar to this.

For example you can change your button to have this instead:

ng-disabled="mainForm.$invalid && !mainForm.$error.date"

Which will leave your button enabled even though the directive has set an error on the date and it should disable if any other field is invalid.

Matthew Green
  • 10,161
  • 4
  • 36
  • 54
  • Can I somehow remove the $error.date when the date is empty? Because on my form the date is also optional and when you remove it, there will be an error. – Adrian Jan 07 '16 at 11:17
  • @adiii4 I don't believe the current version (0.14.3) has this issue. This question was asked with 0.13.0. I would make sure your version is up-to-date and then open a new question if you still have an issue. – Matthew Green Jan 07 '16 at 15:10
  • I fixed it! There was something wrong with a validation directive I coded. But thanks for your help! – Adrian Jan 07 '16 at 15:33