Skip to content
This repository was archived by the owner on Sep 5, 2024. It is now read-only.

Commit 2ed0831

Browse files
author
Andy Tang
committed
Added textarea support for mdTextFloat
``` <md-text-float rows="4" cols="50" type="textarea" label="{{labels.intro}}" ng-model="user.intro"> ```
1 parent 84842ff commit 2ed0831

File tree

5 files changed

+64
-3
lines changed

5 files changed

+64
-3
lines changed

.gitignore

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -12,3 +12,6 @@ dist
1212
/vendor
1313

1414
.polymer-qp
15+
16+
atlassian-ide-plugin.xml
17+
*.iml

src/components/textField/demoBasicUsage/index.html

Lines changed: 2 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -23,6 +23,8 @@
2323
<md-text-float label="Postal Code" ng-model="user.postalCode" > </md-text-float>
2424
</div>
2525
<md-text-float label="Country" ng-model="user.country" disabled > </md-text-float>
26+
<md-text-float label="Intro" ng-model="user.intro" rows="4"
27+
cols="50" type="textarea" > </md-text-float>
2628
</form>
2729
</md-content>
2830

src/components/textField/demoBasicUsage/script.js

Lines changed: 2 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -16,7 +16,8 @@ angular.module('textFieldDemo1', ['ngMaterial'])
1616
city: "Mountain View" ,
1717
state: "CA" ,
1818
country: "USA" ,
19-
postalCode : "94043"
19+
postalCode : "94043",
20+
intro: ""
2021
};
2122
});
2223

src/components/textField/textField.js

Lines changed: 17 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -40,6 +40,9 @@ angular.module('material.components.textField', [
4040
*
4141
* <!-- Specify an input type if desired. -->
4242
* <md-text-float label="eMail" ng-model="user.email" type="email" ></md-text-float>
43+
*
44+
* <!-- Specify textarea as an input type if desired. -->
45+
* <md-text-float label="intro" ng-model="user.intro" type="textarea" ></md-text-float>
4346
* </hljs>
4447
*/
4548
function mdTextFloatDirective($mdTheming, $mdUtil, $parse) {
@@ -134,7 +137,14 @@ function mdInputDirective($mdUtil) {
134137
return {
135138
restrict: 'E',
136139
replace: true,
137-
template: '<input >',
140+
template: function createTemplate(element) {
141+
var isTextarea = element.parent().attr('type') === 'textarea';
142+
if (isTextarea) {
143+
return '<textarea >';
144+
} else {
145+
return '<input >';
146+
}
147+
},
138148
require: ['^?mdInputGroup', '?ngModel'],
139149
link: function(scope, element, attr, ctrls) {
140150
if ( !ctrls[0] ) return;
@@ -146,7 +156,12 @@ function mdInputDirective($mdUtil) {
146156
element.attr('aria-disabled', !!isDisabled);
147157
element.attr('tabindex', !!isDisabled);
148158
});
149-
element.attr('type', attr.type || element.parent().attr('type') || "text");
159+
160+
element.attr({
161+
'type': attr.type || element.parent().attr('type') || "text",
162+
'rows': attr.rows || element.parent().attr('rows'),
163+
'cols': attr.cols || element.parent().attr('cols')
164+
});
150165

151166
// When the input value changes, check if it "has" a value, and
152167
// set the appropriate class on the input group

src/components/textField/textField.spec.js

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -228,6 +228,46 @@ describe('Text Field directives', function() {
228228
});
229229
});
230230

231+
describe(' - mdTextFloat type=textarea', function mdTextareaFloatSuit() {
232+
var model;
233+
beforeEach(function () {
234+
model = {
235+
labels: {
236+
intro: 'intro'
237+
},
238+
user: {
239+
filledIntro: 'This is my intro',
240+
emptyIntro: null
241+
}
242+
}
243+
});
244+
245+
it('should configure the amount of collumn and rows', function configureColsAndRows() {
246+
var markup = '<md-text-float rows="4" cols="50"' +
247+
' type="textarea"' +
248+
' label="{{labels.intro}}" ' +
249+
' ng-model="user.filledIntro" >' +
250+
'</md-text-float>';
251+
var el = buildElement(markup, model);
252+
var textarea = el.find('textarea');
253+
254+
expect(textarea.attr('rows')).toBe('4');
255+
expect(textarea.attr('cols')).toBe('50');
256+
});
257+
258+
it('should configure the label', function configureLabel() {
259+
var markup = '<md-text-float rows="4" cols="50"' +
260+
' type="textarea"' +
261+
' label="{{labels.intro}}" ' +
262+
' ng-model="user.filledIntro" >' +
263+
'</md-text-float>';
264+
var el = buildElement(markup, model);
265+
var label = el.find('label');
266+
267+
expect(label.text()).toBe(model.labels.intro);
268+
});
269+
});
270+
231271
// ****************************************************************
232272
// Utility `setup` methods
233273
// ****************************************************************

0 commit comments

Comments
 (0)