datepicker: with a 'required' attr triggers incorrect error state when setting date

[Phr33d0m]

Actual Behavior:

• What is the issue? * Appending required to mdDatepicker and setting the date dynamically triggers an incorrect error state, if you set the date again the error state is removed.
• What is the expected behavior? Not to trigger the 'red line' when setting a valid date on a required mdDatepicker

CodePen (or steps to reproduce the issue): *

• CodePen Demo which shows your issue: http://codepen.io/anon/pen/KaRzNX
• Details: Click the button once to show the issue, click it again and the issue disappears - this happens only the first time, ever after if you click the button 100 times the error doesn't show up.

Angular Versions: *

• Angular Version: 1.6.1
• Angular Material Version: 1.1.3

Additional Information:

• Browser Type: *
• Browser Version: *
• OS: *
• Stack Traces:

[Splaktar]

I can reproduce this in 1.1.22. This is also an issue on master.

It appears that the md-datepicker-invalid class is getting applied to the <div> with the md-datepicker-input-container class. This is what causes the red line.

However, all of the classes ng-pristine _md-datepicker-has-triangle-icon ng-isolate-scope ng-valid-mindate ng-valid-maxdate ng-valid-filtered ng-valid-valid ng-touched ng-not-empty ng-valid ng-valid-required on the md-datepicker appear to be correct.

The problem appears to be caused by this line

material/src/components/datepicker/js/datepickerDirective.js

Line 667 in 3d5ff5d

angular.element(this.inputContainer).toggleClass(INVALID_CLASS, !this.ngModelCtrl.$valid);

Where this.ngModelCtrl.$valid is false on the first update of the ng-model.

This is because DatePickerCtrl.onExternalChange is called from ngModelCtrl.$formatters prior to $render and $validate being called.