Angular material ng-messages未出现在对话框中

Question

I'm creating a log in form in a dialog and ng-messages for the respective input isn't appearing. The validation is working correctly as the input is being highlighted red, and the button is disabled until the validation is correct.

The code for the dialog is is

Sign in/Create Account

        <md-dialog-content>
        <form name="signinForm" id="Signin" class="md-dialog-content">

            <md-input-container class="flex-gt-sm">

                <input type="email" required class="signInText" id="emailAddress" name="emailAddress" ng-model="signIn.emailAddress"placeholder="Email Address" ng-model="resetPassword.email" ng-pattern="/^.+@.+\..+$/" />
                <div ng-messages="signinForm.emailAddress.$error" role="alert">
                    <div ng-message="pattern">
                        Please enter a valid email address
                    </div>
                </div>

            </md-input-container>
                <br>
                <md-input-container class="flex-gt-sm">

                    <input type="password" class="signInText" id="password" name="password" placeholder="Password" ng-model="signIn.password" />

                </md-input-container>
                <br>
                <md-button class= id="resetPassword" style='text-align:center' onClick="resetPassword()">
                    Reset Password
                </md-button>
                <br>
                <!-- Flat button with ripple -->
                <md-checkbox ng-model="signIn.RememberMe" aria-label="Remember Me">
                    Remember Me
                </md-checkbox>
                <br>
                <!-- Flat button with ripple -->
                <md-button class= id="signIn" ng-disabled="signinForm.$invalid" style='text-align:center' ng-click="signIn()">
                    Sign In
                </md-button>
            <md-progress-circular class="md-hue-2 md-busy" ng-show="login.loading" md-mode="indeterminate" style="margin:auto"></md-progress-circular>
        </form>


        </md-dialog-content>

This is how I'm creating the dialog box

$mdDialog.show({
                controller: signInController,
                templateUrl: 'signIn.html',
                parent: angular.element(document.body),
                targetEvent: ev,
                clickOutsideToClose:true,
            })

My module is using ngMessages and if I put the loginform outside of a dialog box then the messages appear correctly.

And I create my controller as a function. There's not much in the controller yet

 signInController($scope, $mdDialog, $log) {

}

If I put the html outside of a dialog and into a separate page it is working correctly.

I saw this was posted elsewhere

Answer 1

Angular-material 1.1.0-rc has a known bug . I noticed that you're using version 1.0.1 and you're probably experiencing the same bug.

The bug shows the first error message and then won't display any future error messages, but the field will be highlighted red.

Reproducing the bug in your case:

1. Open the dialog and type an invalid email. It will display the correct error message.
2. Clear the input and blur. Because of the bug, it won't show any future message. In this case it should display the required message, but also you didn't specified on. Even if you had specified it won't show.
3. Type again an invalid email. Again, as I said in step 2, it won't display any future error messages.