Permalink
184 lines (145 sloc) 6.39 KB

NOTE: The md-input element is deprecated. md-input-container should be used instead.

md-input-container

Inputs are the basic input component of Material 2. The spec can be found here. md-input-container acts as a wrapper for native input and textarea elements. The native element wrapped by the md-input-container must be marked with the mdInput directive.

Simple input example:

<md-input-container>
  <input mdInput>
</md-input-container>

Simple textarea example:

<md-input-container>
  <textarea mdInput></textarea>
</md-input-container>

Usage

input and textarea attributes

All of the attributes that can be used with normal input and textarea elements can be used on elements within the md-input-container as well. This includes angular specific ones such as ngModel and formControl.

The only limitations are that the type attribute can only be one of the values supported by md-input-container and the native element cannot specify a placeholder attribute if the md-input-container also contains a md-placeholder element.

Supported input types

The following input types can be used with md-input-container:

  • date
  • datetime-local
  • email
  • month
  • number
  • password
  • search
  • tel
  • text
  • time
  • url
  • week

Placeholder

A placeholder is an indicative text displayed in the input zone when the input does not contain text. When text is present, the indicative text will float above this input zone.

You can set the floatingPlaceholder attribute of md-input-container to false to hide the indicative text instead when text is present in the input.

You can specify a placeholder for the input in one of two ways; either using the placeholder attribute on the input or textarea, or using an md-placeholder element in the md-input-container. Using both will raise an error.

Prefix and Suffix

You can include HTML before, and after the input tag, as prefix or suffix. It will be underlined as per the Material specification, and clicking it will focus the input.

To add a prefix, use the mdPrefix attribute on the element. Similarly, to add a suffix, use the mdSuffix attribute. For example, in a template:

<md-input-container align="end">
  <input mdInput placeholder="amount">
  <span mdPrefix>$&nbsp;</span>
  <span mdSuffix>.00</span>
</md-input-container>

Hint Labels

Hint labels are the labels that show below the underline. You can have up to two hint labels; one on the start of the line (left in an LTR language, right in RTL), and one on the end.

You specify a hint label in one of two ways; either using the hintLabel attribute of md-input-container, or using an md-hint element inside the md-input-container, which takes an align attribute containing the side. The attribute version is assumed to be at the start. Specifying a side twice will result in an exception during initialization.

For example, a simple character counter can be made like the following:

<md-input-container>
  <input mdInput
         placeholder="Character count (100 max)"
         maxlength="100"
         value="Hello world. How are you?"
         #characterCountHintExample>
  <md-hint align="end">{{characterCountHintExample.value.length}} / 100</md-hint>
</md-input-container>

Divider Color

The divider (line under the input content) color can be changed by using the dividerColor attribute of md-input-container. A value of primary is the default and will correspond to your theme primary color. Alternatively, you can specify accent or warn.

<md-input-container>
  <input mdInput placeholder="Default color" value="example">
</md-input-container>
<md-input-container dividerColor="accent">
  <input mdInput placeholder="Accent color" value="example">
</md-input-container>
<md-input-container dividerColor="warn">
  <input mdInput placeholder="Warn color" value="example">
</md-input-container>

please note that this image has been doctored to show each input as if it were focused:

Full Forms

You can make a full form using inputs, and they will support autofill natively.

<form>
  <md-input-container style="width: 100%">
    <input mdInput placeholder="Company (disabled)" disabled value="Google">
  </md-input-container>

  <table style="width: 100%" cellspacing="0"><tr>
    <td><md-input-container style="width: 100%">
      <input mdInput placeholder="First name">
    </md-input-container></td>
    <td><md-input-container style="width: 100%">
      <input mdInput placeholder="Long Last Name That Will Be Truncated">
    </md-input-container></td>
  </tr></table>

  <p>
    <md-input-container width="100%">
      <textarea mdInput placeholder="Address" value="1600 Amphitheatre Pkway"></textarea>
    </md-input-container>
    <md-input-container width="100%">
      <textarea mdInput placeholder="Address 2"></textarea>
    </md-input-container>
  </p>

  <table style="width: 100%" cellspacing="0"><tr>
    <td><md-input-container width="100%">
      <input mdInput placeholder="City">
    </md-input-container></td>
    <td><md-input-container width="100%">
      <input mdInput placeholder="State">
    </md-input-container></td>
    <td><md-input-container width="100%">
      <input mdInput #postalCode maxlength="5" placeholder="Postal Code" value="94043">
      <md-hint align="end">{{postalCode.value.length}} / 5</md-hint>
    </md-input-container></td>
  </tr></table>
</form>

API Summary

Inputs

Name Type Description
align "start" | "end" The alignment of the input or textarea. Default = "start".
dividerColor "primary" | "accent" | "warn" The color of the placeholder and underline. Default = "primary".
floatingPlaceholder boolean Whether the placeholder should float above the input after text is entered. Default = true.
hintLabel string The hint text to show on the start end of the md-input-container.