Angular Material NG Messages Not Displaying in a Dialog Box

Question

I create a registration form in a dialog box and ng messages for the corresponding input do not appear. Validation works correctly when the input is highlighted in red and the button is disabled until the validation is correct.

Code for dialogue:                                       

Login / 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 create a dialog box

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

My module uses ngMessages, and if I put the login form outside the dialog box, the messages are displayed correctly.

And I create my controller as a function. There aren’t many in the controller yet

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

}

If I put html outside the dialog and on a separate page, it works correctly.

I saw that it was published elsewhere

Answer 1

Angular -material 1.1.0-rc . , 1.0.1, , , ​​ .

, , .

:

• . .
• . - . required, . , .
• . , 2, .