feat(input): add asterisk to input directive

Fixes #6511. Closes #6518

Author: devversion

src/components/input/demoErrors/index.html

@@ -5,7 +5,7 @@
 
       <md-input-container class="md-block">
         <label>Description</label>
-        <input md-maxlength="30" required name="description" ng-model="project.description">
+        <input md-maxlength="30" required md-no-asterisk name="description" ng-model="project.description">
         <div ng-messages="projectForm.description.$error">
           <div ng-message="required">This is required.</div>
           <div ng-message="md-maxlength">The name has to be less than 30 characters long.</div>

src/components/input/input-theme.scss

@@ -16,6 +16,14 @@ 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

@@ -150,6 +150,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-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.
@@ -250,6 +251,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) {
@@ -264,6 +268,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,12 @@ md-input-container {
     bottom: 100%;
     @include rtl(left, 0, auto);
     @include rtl(right, auto, 0);
+
+    &.md-required:after {
+      content: ' *';
+      font-size: 13px;
+      vertical-align: top;
+    }
   }
 
   label:not(.md-no-float):not(.md-container-ignore),

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) {
@@ -174,6 +174,20 @@ 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');
+
+    expect(label).toHaveClass('md-required');
+  });
+
+  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');