feat(input): add asterisk to input directive

Fixes #6511

Author: devversion

src/components/input/input-theme.scss

@@ -16,6 +16,16 @@ md-input-container.md-THEME_NAME-theme {
     color: '{{foreground-3}}';
   }
 
+  label.md-required:after {
+    color: '{{warn-A700}}'
+  }
+
+  &:not(.md-input-focused) {
+    label.md-required:after {
+      color: '{{foreground-2}}';
+    }
+  }
+
   ng-messages, [ng-messages],
   ng-message, data-ng-message, x-ng-message,
   [ng-message], [data-ng-message], [x-ng-message],

src/components/input/input.js

@@ -135,6 +135,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=} Stops appending of an asterisk to the label of required inputs
  * @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.
@@ -235,6 +236,9 @@ function inputTextareaDirective($mdUtil, $window, $mdAria) {
     var hasNgModel = !!ctrls[1];
     var ngModelCtrl = ctrls[1] || $mdUtil.fakeNgModel();
     var isReadonly = angular.isDefined(attr.readonly);
+    var isRequired = angular.isDefined(attr.required);
+    var mdNoAsterisk = angular.isDefined(attr.mdNoAsterisk);
+
 
     if (!containerCtrl) return;
     if (containerCtrl.input) {
@@ -248,6 +252,8 @@ function inputTextareaDirective($mdUtil, $window, $mdAria) {
 
     if (!containerCtrl.label) {
       $mdAria.expect(element, 'aria-label', element.attr('placeholder'));
+    } else if (isRequired && !mdNoAsterisk) {
+      containerCtrl.label.addClass('md-required');
     }
 
     element.addClass('md-input');

src/components/input/input.scss

@@ -91,6 +91,10 @@ md-input-container {
     bottom: 100%;
     @include rtl(left, 0, auto);
     @include rtl(right, auto, 0);
+
+    &.md-required:after {
+      content: ' *';
+    }
   }
 
   // icon offset should have higher priority as normal label

src/components/input/input.spec.js

@@ -20,8 +20,8 @@ describe('md-input-container directive', function() {
 
     var template =
         '<md-input-container>' +
-          '<input ' + (attrs || '') + '>' +
           '<label></label>' +
+          '<input ' + (attrs || '') + '>' +
         '</md-input-container>';
 
     if (isForm) {
@@ -135,6 +135,25 @@ describe('md-input-container directive', function() {
     expect(el).not.toHaveClass('md-input-has-value');
   });
 
+  it('should append an asterisk to the required label', function() {
+    var el = setup('required');
+    var label = el.find('label');
+    label.text("Required Label");
+
+    var pseudoStyle = getComputedStyle(label[0], ':after');
+
+    expect(label).toHaveClass('md-required');
+
+    expect(label.text() + pseudoStyle.content).toBe('Required Label" *"');
+  });
+
+  it('should not show asterisk on required label if disabled', function() {
+    var el = setup('md-no-asterisk');
+    var ctrl = el.controller('mdInputContainer');
+
+    expect(ctrl.label).not.toHaveClass('md-required');
+  });
+
   it('should match label to given input id', function() {
     var el = setup('id="foo"');
     expect(el.find('label').attr('for')).toBe('foo');