material-textarea

src/components/textField/demo1/index.html

@@ -22,6 +22,7 @@
         <tf-float label="Postal Code" value="user.postalCode" > </tf-float>
       </div>
       <tf-float label="Country"       value="user.country"    disabled > </tf-float>
+      <tf-float label="Description"       value="user.description"    type="textarea" > </tf-float>
     </form>
   </material-content>
 

src/components/textField/demo1/script.js

@@ -16,7 +16,8 @@ angular.module('textFieldDemo1', ['ngMaterial'])
        city:      "Mountain View" ,
        state:     "CA" ,
        country:   "USA" ,
-       postalCode : "94043"
+       postalCode : "94043",
+       description: "Hi,\nI'm Naomi"
     };
   })
 
@@ -51,10 +52,12 @@ angular.module('textFieldDemo1', ['ngMaterial'])
           }
         }
       },
-      template:
-        '<material-input-group ng-disabled="isDisabled">' +
+      template: function(element, attrs){
+        var tagName = attrs.type === "textarea" ? "material-textarea" : "material-input";
+        return '<material-input-group ng-disabled="isDisabled">' +
           '<label for="{{fid}}">{{label}}</label>' +
-          '<material-input id="{{fid}}" ng-model="value">' +
+          '<'+tagName+' id="{{fid}}" ng-model="value">' +
         '</material-input-group>'
+      }
     };
   });

src/components/textField/textField.js

@@ -10,6 +10,9 @@ angular.module('material.components.textField', [])
   ])
   .directive('materialInput', [
     materialInputDirective
+  ])
+  .directive('materialTextarea', [
+    materialTextareaDirective
   ]);
 
 /**
@@ -109,3 +112,70 @@ function materialInputDirective() {
     }
   };
 }
+
+/**
+ * @ngdoc directive
+ * @name materialTextarea
+ * @module material.components.textField
+ *
+ * @restrict E
+ *
+ * @description
+ * Use the `<material-textarea>` directive as elements within a `<material-input-group>` container
+ *
+ * @usage
+ * <hljs lang="html">
+ * <material-input-group ng-disabled="user.isLocked">
+ *   <label for="i1">FirstName</label>
+ *   <material-input id="i1" ng-model="user.description" type="textarea"></material-input>
+ * </material-input-group>
+ * </hljs>
+ */
+function materialTextareaDirective() {
+  return {
+    restrict: 'E',
+    replace: true,
+    template: '<textarea >',
+    require: ['^?materialInputGroup', '?ngModel'],
+    link: function(scope, element, attr, ctrls) {
+      var inputGroupCtrl = ctrls[0];
+      var ngModelCtrl = ctrls[1];
+      if (!inputGroupCtrl) {
+        return;
+      }
+
+      // scan for disabled
+      var isDisabled = Util.isParentDisabled(element);
+
+      element.attr('tabindex', isDisabled ? -1 : 0 );
+
+      // When the input value changes, check if it "has" a value, and
+      // set the appropriate class on the input group
+      if (ngModelCtrl) {
+        //Add a $formatter so we don't use up the render function
+        ngModelCtrl.$formatters.push(function(value) {
+          inputGroupCtrl.setHasValue(!!value);
+          return value;
+        });
+      }
+
+      element.on('input', function() {
+        inputGroupCtrl.setHasValue(!!element.val());
+      });
+
+      // When the input focuses, add the focused class to the group
+      element.on('focus', function(e) {
+        inputGroupCtrl.setFocused(true);
+      });
+      // When the input blurs, remove the focused class from the group
+      element.on('blur', function(e) {
+        inputGroupCtrl.setFocused(false);
+      });
+
+      scope.$on('$destroy', function() {
+        inputGroupCtrl.setFocused(false);
+        inputGroupCtrl.setHasValue(false);
+      });
+    }
+  };
+}