feat(select): support asterisk on floating labels.

src/components/input/input.js

@@ -157,6 +157,10 @@ function labelDirective() {
  * You can use any `<input>` or `<textarea>` element as a child of an `<md-input-container>`. This
  * allows you to build complex forms for data entry.
  *
+ * When the input is required and uses a floating label, then the label will automatically contain
+ * an asterisk (`*`).<br/>
+ * This behavior can be disabled by using the `md-no-asterisk` attribute.
+ *
  * @param {number=} md-maxlength The maximum number of characters allowed in this input. If this is
  * specified, a character counter will be shown underneath the input.<br/><br/>
  * The purpose of **`md-maxlength`** is exactly to show the max length counter text. If you don't
@@ -169,7 +173,7 @@ function labelDirective() {
  * @param {string=} placeholder An alternative approach to using aria-label when the label is not
  * PRESENT. The placeholder text is copied to the aria-label attribute.
  * @param md-no-autogrow {boolean=} When present, textareas will not grow automatically.
- * @param md-no-asterisk {boolean=} When present, asterisk will not be appended to required inputs label
+ * @param md-no-asterisk {boolean=} When present, an asterisk will not be appended to the inputs floating label
  * @param md-detect-hidden {boolean=} When present, textareas will be sized properly when they are
  * revealed after being hidden. This is off by default for performance reasons because it
  * guarantees a reflow every digest cycle.

src/components/select/select.js

@@ -34,6 +34,10 @@ angular.module('material.components.select', [
  *
  * @description Displays a select box, bound to an ng-model.
  *
+ * When the select is required and uses a floating label, then the label will automatically contain
+ * an asterisk (`*`).<br/>
+ * This behavior can be disabled by using the `md-no-asterisk` attribute.
+ *
  * @param {expression} ng-model The model!
  * @param {boolean=} multiple Whether it's multiple.
  * @param {expression=} md-on-close Expression to be evaluated when the select is closed.
@@ -42,6 +46,7 @@ angular.module('material.components.select', [
  * @param {expression=} md-selected-text Expression to be evaluated that will return a string
  * to be displayed as a placeholder in the select input box when it is closed.
  * @param {string=} placeholder Placeholder hint text.
+ * @param md-no-asterisk {boolean=} When set to true, an asterisk will not be appended to the floating label.
  * @param {string=} aria-label Optional label for accessibility. Only necessary if no placeholder or
  * explicit label is present.
  * @param {string=} md-container-class Class list to get applied to the `._md-select-menu-container`
@@ -227,6 +232,7 @@ function SelectDirective($mdSelect, $mdUtil, $mdTheming, $mdAria, $compile, $par
  // grab a reference to the select menu value label
  var valueEl = element.find('md-select-value');
  var isReadonly = angular.isDefined(attr.readonly);
+ var disableAsterisk = $mdUtil.parseAttributeBoolean(attr.mdNoAsterisk);
 
  if (containerCtrl) {
  var isErrorGetter = containerCtrl.isErrorGetter || function() {
@@ -284,6 +290,13 @@ function SelectDirective($mdSelect, $mdUtil, $mdTheming, $mdAria, $compile, $par
 
  attr.$observe('placeholder', ngModelCtrl.$render);
 
+ if (containerCtrl && containerCtrl.label) {
+ attr.$observe('required', function (value) {
+ // Toggle the md-required class on the input containers label, because the input container is automatically
+ // applying the asterisk indicator on the label.
+ containerCtrl.label.toggleClass('md-required', value && !disableAsterisk);
+ });
+ }
 
  mdSelectCtrl.setLabelText = function(text) {
  mdSelectCtrl.setIsPlaceholder(!text);

src/components/select/select.spec.js

@@ -838,6 +838,29 @@ describe('<md-select>', function() {
 
  expect($rootScope.testForm.$pristine).toBe(true);
  }));
+
+ it('should correctly update the input containers label', inject(function($rootScope) {
+ var el = setupSelect('ng-required="isRequired" ng-model="someModel"');
+ var label = el.find('label');
+
+ expect(label).not.toHaveClass('md-required');
+
+ $rootScope.$apply('isRequired = true');
+
+ expect(label).toHaveClass('md-required');
+ }));
+
+ it('should correctly update the input containers label when asterisk is disabled', inject(function($rootScope) {
+ var el = setupSelect('ng-required="isRequired" md-no-asterisk ng-model="someModel"');
+ var label = el.find('label');
+
+ expect(label).not.toHaveClass('md-required');
+
+ $rootScope.$apply('isRequired = true');
+
+ expect(label).not.toHaveClass('md-required');
+ }));
+
  });
 
  describe('view->model', function() {