<!doctype html>
<html ng-app='directive'>
<head>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/angular_material/1.0.5/angular-material.min.css">
<!-- <script src="//cdn.jsdelivr.net/hammerjs/2.0.4/hammer.js"></script> -->
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-animate.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-aria.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/angularjs/1.5.0/angular-messages.js"></script>
<!-- Angular Material Javascript using RawGit to load directly from `bower-material/master` -->
<script src="http://ajax.googleapis.com/ajax/libs/angular_material/1.1.4/angular-material.min.js"></script>
<script src="script.js"></script>
</head>
<body ng-controller="AppCtrl">
<form name="userForm" method="post" action="javascript:;">
<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>
</md-select>
<div ng-messages="userForm.favoriteNumber.$error">
<div ng-message="required">Required</div>
</div>
</md-input-container>
<md-button class="md-raised md-primary" ng-click="saveMe()">Save</md-button>
</form>
</body>
</html>
// Code goes here
angular.module('directive', ['ngMaterial', 'ngMessages']).controller('AppCtrl', function($scope) {
$scope.saveMe = function() {
if(!$scope.userForm.$valid) {
$scope.userForm.$setSubmitted();
return;
}
alert("I am validated");
};
});
/* Styles go here */
Fix / Hack for md-select validation issue
see :
https://github.com/angular/material/issues/7255
https://stackoverflow.com/questions/36138442/error-not-showing-for-angular-material-md-select