2 * Angular Material Design
3 * https://github.com/angular/material
7 (function( window, angular, undefined ){
12 * @name material.components.input
15 angular.module('material.components.input', [
18 .directive('mdInputContainer', mdInputContainerDirective)
19 .directive('label', labelDirective)
20 .directive('input', inputTextareaDirective)
21 .directive('textarea', inputTextareaDirective)
22 .directive('mdMaxlength', mdMaxlengthDirective)
23 .directive('placeholder', placeholderDirective);
27 * @name mdInputContainer
28 * @module material.components.input
33 * `<md-input-container>` is the parent of any input or textarea element.
35 * Input and textarea elements will not behave properly unless the md-input-container
38 * @param md-is-error {expression=} When the given expression evaluates to true, the input container will go into error state. Defaults to erroring if the input has been touched and is invalid.
39 * @param md-no-float {boolean=} When present, placeholders will not be converted to floating labels
44 * <md-input-container>
45 * <label>Username</label>
46 * <input type="text" ng-model="user.name">
47 * </md-input-container>
49 * <md-input-container>
50 * <label>Description</label>
51 * <textarea ng-model="user.description"></textarea>
52 * </md-input-container>
56 function mdInputContainerDirective($mdTheming, $parse) {
57 ContainerCtrl.$inject = ["$scope", "$element", "$attrs"];
61 controller: ContainerCtrl
64 function postLink(scope, element, attr) {
67 function ContainerCtrl($scope, $element, $attrs) {
70 self.isErrorGetter = $attrs.mdIsError && $parse($attrs.mdIsError);
72 self.delegateClick = function() {
75 self.element = $element;
76 self.setFocused = function(isFocused) {
77 $element.toggleClass('md-input-focused', !!isFocused);
79 self.setHasValue = function(hasValue) {
80 $element.toggleClass('md-input-has-value', !!hasValue);
82 self.setInvalid = function(isInvalid) {
83 $element.toggleClass('md-input-invalid', !!isInvalid);
85 $scope.$watch(function() {
86 return self.label && self.input;
87 }, function(hasLabelAndInput) {
88 if (hasLabelAndInput && !self.label.attr('for')) {
89 self.label.attr('for', self.input.attr('id'));
94 mdInputContainerDirective.$inject = ["$mdTheming", "$parse"];
96 function labelDirective() {
99 require: '^?mdInputContainer',
100 link: function(scope, element, attr, containerCtrl) {
101 if (!containerCtrl || attr.mdNoFloat) return;
103 containerCtrl.label = element;
104 scope.$on('$destroy', function() {
105 containerCtrl.label = null;
115 * @module material.components.input
118 * Use the `<input>` or the `<textarea>` as a child of an `<md-input-container>`.
120 * @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/>
121 * The purpose of **`md-maxlength`** is exactly to show the max length counter text. If you don't want the counter text and only need "plain" validation, you can use the "simple" `ng-maxlength` or maxlength attributes.
122 * @param {string=} aria-label Aria-label is required when no label is present. A warning message will be logged in the console if not present.
123 * @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.
127 * <md-input-container>
128 * <label>Color</label>
129 * <input type="text" ng-model="color" required md-maxlength="10">
130 * </md-input-container>
132 * <h3>With Errors</h3>
135 * <form name="userForm">
136 * <md-input-container>
137 * <label>Last Name</label>
138 * <input name="lastName" ng-model="lastName" required md-maxlength="10" minlength="4">
139 * <div ng-messages="userForm.lastName.$error" ng-show="userForm.lastName.$dirty">
140 * <div ng-message="required">This is required!</div>
141 * <div ng-message="md-maxlength">That's too long!</div>
142 * <div ng-message="minlength">That's too short!</div>
144 * </md-input-container>
145 * <md-input-container>
146 * <label>Biography</label>
147 * <textarea name="bio" ng-model="biography" required md-maxlength="150"></textarea>
148 * <div ng-messages="userForm.bio.$error" ng-show="userForm.bio.$dirty">
149 * <div ng-message="required">This is required!</div>
150 * <div ng-message="md-maxlength">That's too long!</div>
152 * </md-input-container>
153 * <md-input-container>
154 * <input aria-label='title' ng-model='title'>
155 * </md-input-container>
156 * <md-input-container>
157 * <input placeholder='title' ng-model='title'>
158 * </md-input-container>
162 * Requires [ngMessages](https://docs.angularjs.org/api/ngMessages).
163 * Behaves like the [AngularJS input directive](https://docs.angularjs.org/api/ng/directive/input).
167 function inputTextareaDirective($mdUtil, $window, $mdAria) {
170 require: ['^?mdInputContainer', '?ngModel'],
174 function postLink(scope, element, attr, ctrls) {
176 var containerCtrl = ctrls[0];
177 var ngModelCtrl = ctrls[1] || $mdUtil.fakeNgModel();
178 var isReadonly = angular.isDefined(attr.readonly);
180 if ( !containerCtrl ) return;
181 if (containerCtrl.input) {
182 throw new Error("<md-input-container> can only have *one* <input> or <textarea> child element!");
184 containerCtrl.input = element;
186 if(!containerCtrl.label) {
187 $mdAria.expect(element, 'aria-label', element.attr('placeholder'));
190 element.addClass('md-input');
191 if (!element.attr('id')) {
192 element.attr('id', 'input_' + $mdUtil.nextUid());
195 if (element[0].tagName.toLowerCase() === 'textarea') {
199 var isErrorGetter = containerCtrl.isErrorGetter || function() {
200 return ngModelCtrl.$invalid && ngModelCtrl.$touched;
202 scope.$watch(isErrorGetter, containerCtrl.setInvalid);
204 ngModelCtrl.$parsers.push(ngModelPipelineCheckValue);
205 ngModelCtrl.$formatters.push(ngModelPipelineCheckValue);
207 element.on('input', inputCheckValue);
211 .on('focus', function(ev) {
212 containerCtrl.setFocused(true);
214 .on('blur', function(ev) {
215 containerCtrl.setFocused(false);
221 //ngModelCtrl.$setTouched();
222 //if( ngModelCtrl.$invalid ) containerCtrl.setInvalid();
224 scope.$on('$destroy', function() {
225 containerCtrl.setFocused(false);
226 containerCtrl.setHasValue(false);
227 containerCtrl.input = null;
233 function ngModelPipelineCheckValue(arg) {
234 containerCtrl.setHasValue(!ngModelCtrl.$isEmpty(arg));
237 function inputCheckValue() {
238 // An input's value counts if its length > 0,
239 // or if the input's validity state says it has bad input (eg string in a number input)
240 containerCtrl.setHasValue(element.val().length > 0 || (element[0].validity||{}).badInput);
243 function setupTextarea() {
244 var node = element[0];
245 var onChangeTextarea = $mdUtil.debounce(growTextarea, 1);
247 function pipelineListener(value) {
253 ngModelCtrl.$formatters.push(pipelineListener);
254 ngModelCtrl.$viewChangeListeners.push(pipelineListener);
258 element.on('keydown input', onChangeTextarea);
259 element.on('scroll', onScroll);
260 angular.element($window).on('resize', onChangeTextarea);
262 scope.$on('$destroy', function() {
263 angular.element($window).off('resize', onChangeTextarea);
266 function growTextarea() {
267 node.style.height = "auto";
269 var height = getHeight();
270 if (height) node.style.height = height + 'px';
273 function getHeight () {
274 var line = node.scrollHeight - node.offsetHeight;
275 return node.offsetHeight + (line > 0 ? line : 0);
278 function onScroll(e) {
280 // for smooth new line adding
281 var line = node.scrollHeight - node.offsetHeight;
282 var height = node.offsetHeight + line;
283 node.style.height = height + 'px';
288 inputTextareaDirective.$inject = ["$mdUtil", "$window", "$mdAria"];
290 function mdMaxlengthDirective($animate) {
293 require: ['ngModel', '^mdInputContainer'],
297 function postLink(scope, element, attr, ctrls) {
299 var ngModelCtrl = ctrls[0];
300 var containerCtrl = ctrls[1];
301 var charCountEl = angular.element('<div class="md-char-counter">');
303 // Stop model from trimming. This makes it so whitespace
304 // over the maxlength still counts as invalid.
305 attr.$set('ngTrim', 'false');
306 containerCtrl.element.append(charCountEl);
308 ngModelCtrl.$formatters.push(renderCharCount);
309 ngModelCtrl.$viewChangeListeners.push(renderCharCount);
310 element.on('input keydown', function() {
311 renderCharCount(); //make sure it's called with no args
314 scope.$watch(attr.mdMaxlength, function(value) {
316 if (angular.isNumber(value) && value > 0) {
317 if (!charCountEl.parent().length) {
318 $animate.enter(charCountEl, containerCtrl.element,
319 angular.element(containerCtrl.element[0].lastElementChild));
323 $animate.leave(charCountEl);
327 ngModelCtrl.$validators['md-maxlength'] = function(modelValue, viewValue) {
328 if (!angular.isNumber(maxlength) || maxlength < 0) {
331 return ( modelValue || element.val() || viewValue || '' ).length <= maxlength;
334 function renderCharCount(value) {
335 charCountEl.text( ( element.val() || value || '' ).length + '/' + maxlength );
340 mdMaxlengthDirective.$inject = ["$animate"];
342 function placeholderDirective($log) {
343 var blackListElements = ['MD-SELECT'];
346 require: '^^?mdInputContainer',
351 function postLink(scope, element, attr, inputContainer) {
352 if (!inputContainer) return;
353 if (blackListElements.indexOf(element[0].nodeName) != -1) return;
354 if (angular.isDefined(inputContainer.element.attr('md-no-float'))) return;
356 var placeholderText = attr.placeholder;
357 element.removeAttr('placeholder');
359 if ( inputContainer.element.find('label').length == 0 ) {
360 var placeholder = '<label ng-click="delegateClick()">' + placeholderText + '</label>';
362 inputContainer.element.addClass('md-icon-float');
363 inputContainer.element.prepend(placeholder);
365 $log.warn("The placeholder='" + placeholderText + "' will be ignored since this md-input-container has a child label element.");
370 placeholderDirective.$inject = ["$log"];
372 })(window, window.angular);