Spencer Spencer - 7 months ago 525
AngularJS Question

Error not showing for Angular Material md-select

I'm trying to implement a form where the error messages don't show up until the submit button is clicked. For an input, this seems to work out of the box, but for md-select isn't behaving as expected.

When I submit the form (without filling anything out) I get the error message for the input, but not for the md-select.


Here's the form:

<form name="userForm" novalidate ng-submit="test()">
<label>Last Name</label>
<input name="lastName" ng-model="lastName" required>
<div ng-messages="userForm.lastName.$error">
<div ng-message='required'>This is required!</div>

<md-input-container class="md-block">
<label>Favorite Number</label>
<md-select name="favoriteNumber" ng-model="myNumber" required>
<md-option value="1">One</md-option>
<md-option value="2">Two</md-option>
<div ng-messages="userForm.favoriteNumber.$error">
<div ng-message='required'>This is required</div>

<div>name = {{lastName}}</div>
<div>userForm.lastName.$error = {{userForm.lastName.$error}}</div>
<div>number = {{myNumber}}</div>
<div>userForm.favoriteNumber.$error = {{userForm.favoriteNumber.$error}} </div>

<md-button type="submit" class="md-raised md-primary">Save</md-button>


There is an issue about this github issue

Basically, the message just shows up when the md-select is blurred