Material: md-dialog not showing ng-message properly

[kschwidder]

I have the following dialog defined with some input fields.
In the plunker I can correctly run only the form which show the ng-messages properly.

When embedding it into a dialog, the ng-messages does not show up.

What am I missing ?

<md-dialog style="min-width: 30%; max-width: 98%; overflow: auto;">
    <div>
        <form name="createForm">
            <div layout="row" layout-align="start center">
                <div class="cs-subheader" layout-fill layout-padding>
                    <md-subheader>{{'LABEL_CREATE_SKILL' | translate}}</md-subheader>
                </div>
            </div>
            <div layout="row" layout-align="start center" layout-padding>
                <md-input-container layout-fill>
                    <label>{{'FIELD_NAME' | translate}} (*)</label>
                    <input required name="title" ng-model="data.name" ui-focus/>

                    <div ng-messages="createForm.title.$error">
                        <div ng-message="required">{{'MESSAGE_FIELD_REQUIRED' | translate}}</div>
                    </div>
                </md-input-container>
            </div>
            <div layout="row" layout-align="start center" layout-padding>
                <md-input-container layout-fill>
                    <label>{{'FIELD_KEY' | translate}} (*)</label>
                    <input required name="key" ng-model="data.key"/>

                    <div ng-messages="createForm.key.$error">
                        <div ng-message="required">{{'MESSAGE_FIELD_REQUIRED' | translate}}</div>
                    </div>
                </md-input-container>
            </div>
            <div layout="row" layout-align="start center" layout-padding>
                <md-input-container layout-fill>
                    <label translate>FIELD_LONG_TEXT</label>
                    <textarea name="description" ng-model="data.description" columns="1"></textarea>
                </md-input-container>
            </div>
        </form>
    </div>
    <div class="md-actions" layout="row">
        <md-button class="md-raised" ng-click="cancel()" aria-label="{{'STANDARD_BTN_CANCEL' | translate}}">
            {{'STANDARD_BTN_CANCEL' | translate}}
        </md-button>
        <md-button class="md-raised md-primary" ng-click="ok()" ng-disabled="createForm.$invalid"
                   aria-label="{{'STANDARD_BTN_CREATE' | translate}}" class="md-primary">
            {{'STANDARD_BTN_CREATE' | translate}}
        </md-button>
    </div>
</md-dialog>

[bradmartin]

Same issue, below is the dialog I have. The textarea label changes color as well as the md-maxlength value but as for the ng-message text it never shows. Removing md-maxlength doesn't resolve the issue either.

    <md-dialog-content>
        <div layout="row" layout-align="space-around center">
            <md-input-container flex >
                <label>Message</label>
                <textarea ng-model="quickMsgData.msg" name="msg" md-maxlength="350" maxlength="350" required></textarea>
                <div ng-messages="quickMessageForm.msg.$error.required" ng-show="quickMessageForm.msg.$dirty && quickMessageForm.msg.$error.required || quickMessageFormSubmitted==true" ng-hide="quickMessageForm.msg.$valid">
                    <div ng-message="required">* Required</div>
                </div>
            </md-input-container>
        </div>
    </md-dialog-content>

[kschwidder]

@ThomasBurleson is this a bug in md-dialog and ng-messages ? I think a lot of people are using md-dialog with input fields and field validation should work.

Thx a lot for your efforts around angular material.

[jbduzan]

+1
I have the same issue, ng-message not showing with basic or custom validation directives

[kschwidder]

Based on the comment of #2820 I have solved some issues with the dialogs.

1. Please update the doc that angular-messages have to be included.
2. Change CSS:

css md-input-container ng-message, md-input-container data-ng-message, md-input-container x-ng-message, md-input-container [ng-message], md-input-container [data-ng-message], md-input-container [x-ng-message], md-input-container .md-char-counter { position: RELATIVE; /* INSTEAD OF ABSOLUTE */ font-size: 12px; line-height: 24px; }

The CSS style defines the position as absolute which does not work in our md-dialogs. When changing it to relative they are shown properly.

Hope that helps to fix this in the libs

[iRoachie]

@kschwidder I have no issues with using form validation in mdDialog. Can you make a plunker so I can see?

[topherfangio]

@kschwidder I have a PR (#5123) to add some info to the docs about optional dependencies.

Additionally, we made some changes to the way messages were shown including using position: relative so I believe this issue can be closed.

Please post a comment including a Codepen (using the latest master versions) which demonstrates the issue if you are still having problems and we will reopen. Here are some links if you need them:

• Angular Material HEAD
  
  
  
  • Bower Install - https://github.com/angular/bower-material/blob/master/angular-material.js
  
  
  • Bower Install - https://github.com/angular/bower-material/blob/master/angular-material.css
  
  
  • RAWGIT - https://rawgit.com/angular/bower-material/master/angular-material.js
  
  
  • RAWGIT - https://rawgit.com/angular/bower-material/master/angular-material.css
  
  

[rohitrule]

Tried using the RAWGIT, but looks like the issue is still unresolved.ng-message is till not shown properly inside md-dialog

[fabn]

I'm experiencing the same issue. ng-message works like a charm inside my page but not when used inside a dialog.

[locus2k]

I was able to fix the issue with the following CSS overrides

md-input-container .md-input-message-animation:not(.ng-animate) { opacity: 1 !important; margin-top: 0px !important; }

Then add an ng-show to suppress it from always showing until certain conditions were met

[lucis]

Has someone found a hotfix for it in the angular-material source?

[lucis]

The problem is caused, apparently, by our dialog having form tags and, theoretically, they are inside another form tags from the main page.