<!DOCTYPE html>
<html ng-app="App">
<head>
<link rel="stylesheet" href="https://rawgit.com/angular/bower-material/master/angular-material.css">
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-animate.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-aria.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.13/angular-messages.js"></script>
<script src="https://rawgit.com/angular/bower-material/master/angular-material.js"></script>
<script>
var app = angular.module('App', ['ngMaterial', 'ngMessages']);
app.controller('AppCtrl', function($scope) {
$scope.statuses = [{
name: 'Active',
id: '1'
}, {
name: 'Inactive',
id: '2'
}]
$scope.statusId1 = null; // Required validation works if value is null
$scope.statusId2 = 0; // 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">
<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">
<div ng-message="required">Required</div>
</div>
<br/>
<div style="color:blue">Selected Value: {{statusId2}}</div>
</md-input-container>
</form>
</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.