<!DOCTYPE html>
<html ng-app="App">
<head>
<link rel="stylesheet" href="https://material.angularjs.org/HEAD/angular-material.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-aria.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.5.3/angular-messages.js"></script>
<script src="https://material.angularjs.org/HEAD/angular-material.min.js"></script>
<script>
var app = angular.module('App', ['ngMaterial', 'ngMessages']);
app.controller('AppCtrl', function($scope) {
$scope.statuses = [{
name: 'Active',
id: '599789c6-57d7-45e2-8eb2-965adc4d4457'
}, {
name: 'Inactive',
id: '6260dea1-a08c-465a-985a-87b859247862'
}]
$scope.statusId1 = null; // Required validation works if value is null
$scope.statusId2 = '599789c6-57d7-45e2-8eb2-965adc4d4457'; // Issue: Required validation doesn't work it value is not null
});
</script>
</head>
<body ng-controller="AppCtrl">
<form name="statusForm">
<div style="color:red">
<ul>
<li ng-repeat="(key, errors) in statusForm.$error track by $index">
<strong>{{ key }}</strong> errors
<ul>
<li ng-repeat="e in errors">{{ e.$name }} has an error: <strong>{{ key }}</strong>.</li>
</ul>
</li>
</ul>
</div>
<md-input-container>
Status 1: validation working
<md-select name="status1" ng-model="statusId1" required>
<md-option ng-repeat="status in statuses" ng-value="status.id">{{ status.name }}</md-option>
</md-select>
<div ng-messages="statusForm.status1.$error" md-auto-hide="false">
<div ng-message="required">Required</div>
</div>
<br/>
<div style="color:blue">Selected Value: {{statusId1}}</div>
</md-input-container>
<br/>
<br/>
<md-input-container>
Status 2: validation not working
<md-select name="status2" ng-model="statusId2" required>
<md-option ng-repeat="status in statuses" ng-value="status.id">
{{ status.name }}
</md-option>
</md-select>
<div ng-messages="statusForm.status2.$error" md-auto-hide="false">
<div ng-message="required">Required</div>
</div>
<br/>
<div style="color:blue">Selected Value: {{statusId2}}</div>
</md-input-container>
<md-button type="submit" ng-disabled="statusForm.$invalid">Submit</md-button>
</form>
{{statuses | json}}
</body>
</html>
Required validation is not working for md-select dropdown if the ng-model value is not null.
In my case I am using integer type for ng-model value which by default contains value as zero.
The options doesn't contain any item with the value zero. But still validation is not firing.
If I set model value as null then it is working.