Material: ng-messages in dialog are not shown/visible

[bastienJS]

My bower packages I use:

{
  "name": "tgbClient",
  "version": "0.0.0",
  "dependencies": {
    "angular-animate": "~1.4.7",
    "angular-touch": "~1.4.7",
    "angular-ui-router": "~0.2.15",
    "angular-material": "~0.11.2",
    "animate.css": "~3.4.0",
    "angular": "1.4.7",
    "angular-material-icons": "~0.6.0",
    "angular-local-storage": "~0.2.2",
    "angular-messages": "~1.4.7"
  },
  "devDependencies": {
    "angular-mocks": "~1.4.7"
  },
  "resolutions": {
    "angular": "~1.4.0",
    "angular-material": "~0.11.2",
    "animate.css": "~3.4.0"
  }
}

My ng-messges are NOT shown in the user interface when put in a md-dialog.

I know all the threads like these:
https://github.com/angular/material/issues/2820
https://github.com/angular/material/issues/4291
http://stackoverflow.com/questions/32272386/angular-ng-messages-not-showing-inside-angular-material-design-dialog-md-dialo

and there are other floating around github here.

In the browser I get this error:

RIA: Attribute " aria-label ", required for accessibility, is missing on node: <input class=​"md-datepicker-input md-input" aria-haspopup=​"true" ng-focus=​"ctrl.setFocused(true)​" ng-blur=​"ctrl.setFocused(false)​" id=​"input_2" placeholder=​"start date" size=​"12">​
angular.js:12477 ARIA: Attribute " aria-label ", required for accessibility, is missing on node: <button class=​"md-datepicker-button md-icon-button md-button md-default-theme" ng-transclude type=​"button" tabindex=​"-1" aria-hidden=​"true" ng-click=​"ctrl.openCalendarPane($event)​">​…​</button>​
angular.js:12477 ARIA: Attribute " aria-label ", required for accessibility, is missing on node: <input class=​"md-datepicker-input md-input" aria-haspopup=​"true" ng-focus=​"ctrl.setFocused(true)​" ng-blur=​"ctrl.setFocused(false)​" id=​"input_4" placeholder=​"end date" size=​"12">​

WORKS NOT

<md-dialog aria-label="Edit schoolyear" ng-cloak>
  <form>
    <md-toolbar>
      <div class="md-toolbar-tools">
        <h2>Edit schoolyear</h2>
        <span flex></span>
        <md-button class="md-icon-button" ng-click="cancel()">
          <md-icon aria-label="Close dialog"></md-icon>
        </md-button>
      </div>
    </md-toolbar>
    <md-dialog-content style="max-width:800px;max-height:810px; ">

      <form name="schoolyearForm">

        <md-input-container>
          <label>Name</label>
          <input type="text" md-maxlength="30" required name="name" ng-model="schoolyear.name">

          <div ng-messages="schoolyearForm.name.$error">
            <div ng-message="required">This is required.</div>
            <div ng-message="md-maxlength">The name has to be less than 30 characters long.</div>
          </div>
        </md-input-container>

        <md-input-container>
          <lab>Start date</lab>
          <md-datepicker required name="startDate" ng-model="schoolyear.startDate"
                         md-placeholder="start date"></md-datepicker>
          <div ng-messages="schoolyearForm.startDate.$error">
            <div ng-message="required">This is required.</div>
          </div>
        </md-input-container>

        <md-input-container>
          <lab>End date</lab>
          <md-datepicker aria-label="Start date" required name="endDate" ng-model="schoolyear.endDate"
                         md-placeholder="end date"></md-datepicker>
          <div ng-messages="schoolyearForm.endDate.$error">
            <div ng-message="required">This is required.</div>
          </div>
        </md-input-container>

      </form>
    </md-dialog-content>
    <div class="md-actions" layout="row">
      <span flex></span>
      <md-button ng-click="cancel()">
        Cancel
      </md-button>
      <md-button ng-click="save()" style="margin-right:20px;">
        Save
      </md-button>
    </div>
  </form>
</md-dialog>

WORKS

    <md-content style="max-width:800px;max-height:810px; ">

      <form name="schoolyearForm">

        <md-input-container>
          <label>Name</label>
          <input type="text" md-maxlength="30" required name="name" ng-model="schoolyear.name">

          <div ng-messages="schoolyearForm.name.$error">
            <div ng-message="required">This is required.</div>
            <div ng-message="md-maxlength">The name has to be less than 30 characters long.</div>
          </div>
        </md-input-container>

        <md-input-container>
          <lab>Start date</lab>
          <md-datepicker required name="startDate" ng-model="schoolyear.startDate"
                         md-placeholder="start date"></md-datepicker>
          <div ng-messages="schoolyearForm.startDate.$error">
            <div ng-message="required">This is required.</div>
          </div>
        </md-input-container>

        <md-input-container>
          <lab>End date</lab>
          <md-datepicker aria-label="Start date" required name="endDate" ng-model="schoolyear.endDate"
                         md-placeholder="end date"></md-datepicker>
          <div ng-messages="schoolyearForm.endDate.$error">
            <div ng-message="required">This is required.</div>
          </div>
        </md-input-container>

      </form>
    </md-content>

    <div class="md-actions" layout="row">
      <span flex></span>
      <md-button ng-click="cancel()">
        Cancel
      </md-button>
      <md-button ng-click="save()" style="margin-right:20px;">
        Save
      </md-button>
    </div>

In the case where the ng-message are not visible, that source code is actually copy/paste from the official demos. Thus I expect them to work until it is a bug.

[EladBezalel]

@bastienJS can you please create 2 codepens with the working and not working code? It'll help me investigate it.

[bastienJS]

Yes I will do in appr. 10 hours when I am at home in the evening. I anyway thought I should do that, but was too lazy for now..

[bastienJS]

Wow nearly punctually in my free time :p

NOT Working sample: http://plnkr.co/edit/B0xuv5pJyebju0SBb9gY

Working sample: http://plnkr.co/edit/KdDzogLurUGxp5lgq1wd

have fun!

[bastienJS]

haha... I had TWO form tags inside my html that seemed to break the validation.

Working sample fixed without 2 form-tags:

http://plnkr.co/edit/B0xuv5pJyebju0SBb9gY?p=preview

If plunker would not have shown me the red alert icons in the editor that there is something wrong - why ever plunker can detect that... - I saw there is something wrong...

Bug fixed I am happy :-)

[bastienJS]

Developer issue...

[EladBezalel]

Great :)

[sridharspeaks]

@bastienJS your bug fix of unwanted form tag is wonderful. I was searching for this solution for almost 5 hrs now. I just checked yours and found that there is a form tag in the parent page of my md-dialog due to which my messages are not working. Thank you very much for your comment.

[lucis]

Still. Sometimes I have a form in main page but in this form I may need to open a dialog with a sub-form. Isnt there a workaround for it?