Datepicker binding fails with custom format and ng-required

[Neilski]

If the datepicker is defined with a custom date format (e.g. 'dd/MM/yyyy') and is marked with the ng-required attribute, the model binding fails and sets the target model date to null. For example:

<input class="form-control" type="text"
        ng-model="startDate"
        uib-datepicker-popup="dd/MM/yyyy"
        is-open="datePickerOpenStatus"
        ng-required="true" />

A simple example of this problem can be found at http://plnkr.co/edit/uwAzMAEzhxKMaSKHYu5P

The code uses...

• AngularJS version 1.4.7
• Angular-Animate version 1.4.7
• Angualr UI-Bootstrap version 0.14.1

[icfantv]

@Neilski, please do not use the issues forum for support related requests. Rather, please follow the instructions here.

If you think you've found a bug, please follow these instructions.

Unfortunately, if you think you have found a bug and do not follow the above instructions within a reasonable amount of time, we will close the issue due to lack of activity.

[Neilski]

Apologies. I have now added the Plunker example at http://plnkr.co/edit/uwAzMAEzhxKMaSKHYu5P I hope this helps define the problem.

[icfantv]

No worries. This needs more investigation, but in the interim, it works correctly if you just add required instead of the directive ng-required - but I'm not sure why, at the moment.

[icfantv]

Ahhhh. After some research, you're not using the ng-required attribute correctly. Per the docs, you only want to use ng-required when you want to data bind to the value. I.e., you want to use an expression to determine whether or not the field is required. E.g., required and ng-required="true" are the same thing.

Closing as this is working as designed.

[Neilski]

I have just re-tested my test case using required instead of ng-required and I am still seeing the same problem with the date value being nulled.

[icfantv]

I'll post the working plunker when I get into work. Please ping me if I forget.

[icfantv]

Ok, you neglected to say that the issue is when you assign an initial value to the model and ng-required is specified. Without the initial value, it is working as designed.

I'm reopening for more investigation.

[icfantv]

@Neilski, our demo is working fine. Please use that as a launching point and reopen if you still think there is a bug. Thanks.

[codenewa]

I'm not sure if this is the same issue but I have a similar example here

So far, I have seen this issue only when format is provided with uib-datepicker-popup and it also includes a ngRequired expression. As you can see in the plnkr, the date field disappears from the model.

So, the snippet will work properly if you remove
ng-required="data.config.dob.isRequired"
or, change
uib-datepicker-popup="MM/dd/yyyy" to uib-datepicker-popup

One more observation was that this affects all other datepickers on the page whether or not they have the format and ngRequired combination.

[icfantv]

@codenewa, please open a new issue following our instructions if you feel this is a bug and needs fixing. Adding to an already closed issue is almost a sure-fire way for it to get missed/lost. Thanks.

[icfantv]

This is a duplicate of #4616 and was fixed in #4635.