textfield.component.html

<h4>Text Fields</h4>


<mdl-textfield
        #theFirstTextfield
        type="text"
        label="Text..."
        [(ngModel)]="text1"
        placeholder="type a text"
        autofocus
        autocomplete="name"
        (blur)="onBlur($event)"
        (focus)="onFocus($event)"></mdl-textfield>
<mdl-textfield
        type="text"
        label="Number..."
        pattern="-?[0-9]*(\.[0-9]+)?"
        error-msg="Input is not a number!"
        [(ngModel)]="text2"></mdl-textfield>

<br/>
{{text1}}
{{text2}}

<br/>
<mdl-textfield type="text" label="Text...(disabled)" [(ngModel)]="text3" disabled></mdl-textfield>

<br/>
<mdl-textfield type="text" label="Text...(required)" [(ngModel)]="text3" required=""></mdl-textfield>

<pre prism>
  <![CDATA[
<mdl-textfield
        type="text"
        label="Text..."
        [(ngModel)]="text1"
        placeholder="type a text"
        autofocus
        autocomplete="name"
        (blur)="onBlur($event)"
        (focus)="onFocus($event)"></mdl-textfield>

<mdl-textfield
        type="text"
        label="Number..."
        pattern="-?[0-9]*(\.[0-9]+)?"
        error-msg="Input is not a number!"
        [(ngModel)]="text2"></mdl-textfield>
  ]]>
</pre>

<h5>Set max length</h5>

<mdl-textfield type="text" label="maxlength is 10" maxlength="10"></mdl-textfield>

<pre prism>
  <![CDATA[
<mdl-textfield type="text" label="maxlength is 10" maxlength="10"></mdl-textfield>
  ]]>
</pre>

<h5>Text/Numeric with floating label</h5>

<mdl-textfield name="text1" type="text" label="Text..." [(ngModel)]="text3" floating-label></mdl-textfield>
<mdl-textfield
        name="text2"
        type="text"
        label="Number..."
        pattern="-?[0-9]*(\.[0-9]+)?"
        error-msg="Input is not a number!"
        [(ngModel)]="text4"
        floating-label ></mdl-textfield>

<br/>
{{text3}}
{{text4}}

<pre prism>
  <![CDATA[
<mdl-textfield type="text" label="Text..." [(ngModel)]="text3" floating-label></mdl-textfield>
<mdl-textfield
        type="text"
        label="Number..."
        pattern="-?[0-9]*(\.[0-9]+)?"
        error-msg="Input is not a number!"
        [(ngModel)]="text4"
        floating-label ></mdl-textfield>
  ]]>
</pre>

<h5>Number with min and step restrictions</h5>

<mdl-textfield
        name="number1"
        type="number"
        label="Number..."
        min="0"
        step="0.01"
        error-msg="invalid number!"
        [(ngModel)]="number1"
        floating-label ></mdl-textfield>

<br/>
{{number1}}
{{valueType}}

<pre prism>
  <![CDATA[
<mdl-textfield
        name="number1"
        type="number"
        label="Number..."
        min="0"
        step="0.01"
        error-msg="Input is not a number!"
        [(ngModel)]="number1"
        floating-label ></mdl-textfield>
  ]]>
</pre>

<h5>Multiline Textfield</h5>
aka Textarea. Add the attribute row to turn the input field to a textarea. Specify maxrows to restrict the
possible lines.<br/>

<mdl-textfield label="Text..." [(ngModel)]="text5" rows="3" maxrows="3" floating-label></mdl-textfield>
<br/>
{{text5}}

<pre prism>
  <![CDATA[
<mdl-textfield label="Text..." [(ngModel)]="text5" rows="3" maxrows="3" floating-label></mdl-textfield>
  ]]>
</pre>

<h5>Expandable</h5>

Just specify an icon to turn the text input field into an expandable field.
<br/>

<mdl-textfield type="text" [(ngModel)]="text6" icon="search"></mdl-textfield>
<br/>
{{text6}}
<pre prism>
  <![CDATA[
<mdl-textfield type="text" [(ngModel)]="text6" icon="search"></mdl-textfield>
  ]]>
</pre>

<h5>Attributes of the mdl-textfield component</h5>
<table class="docu" mdl-shadow="2">
   <thead>
   <tr>
      <th>Attribute</th>
      <th>Description</th>
   </tr>
   </thead>
   <tbody>

   <tr>
     <td>autofocus</td>
     <td>Set the focus on this input field on page load.</td>
   </tr>

   <tr>
     <td>disableNativeValidityChecking</td>
     <td>Is a BooleanProperty that disables the build in native checking to mark the input
       field as invalid.
       See <a href="https://github.com/mseemann/angular2-mdl/wiki/Mdl-Textfield-and-native-validity-checking"
              target="_blank">
         https://github.com/mseemann/angular2-mdl/wiki/Mdl-Textfield-and-native-validity-checking
       </a>for a detailed description.
     </td>
   </tr>

   <tr>
     <td>disabled</td>
     <td>Disable the text field if present or true.</td>
   </tr>


   <tr>
     <td>error-msg</td>
     <td>The error message that will be shown if the input value did not match the pattern.</td>
   </tr>

   <tr>
     <td>floating-label</td>
     <td>If present or true the label of the text field will be floating if the element has the focus.</td>
   </tr>

   <tr>
     <td>icon</td>
     <td>If present the input field is hidden until the icon is clicked or the
       component gains the focus. The icon must be a material design icon.</td>
   </tr>

   <tr>
     <td>label</td>
     <td>The label of the input field</td>
   </tr>

   <tr>
     <td>max</td>
     <td>Restrict the value for type number to a max value.</td>
   </tr>

   <tr>
     <td>maxrows</td>
     <td>Defines the maximum number of row the component will expand to.</td>
   </tr>

   <tr>
     <td>min</td>
     <td>Restrict the value for type number to a min value.</td>
   </tr>

   <tr>
     <td>step</td>
     <td>Restrict the value for type number to a be based on the given step (e.g. 0.01
       for numbers with two decimal places).</td>
   </tr>

   <tr>
     <td>ngModel</td>
     <td>The text field is ngModel compatible.</td>
   </tr>

   <tr>
     <td>pattern</td>
     <td>A regular expression that the input text must conform to. If it dosen't match
       the error (attribute <i>error-msg</i>) will be shown</td>
   </tr>

   <tr>
     <td>placeholder</td>
     <td>A placeholder string for the input filed.</td>
   </tr>

   <tr>
     <td>readonly</td>
     <td>Mark the text field as readonly.</td>
   </tr>

   <tr>
     <td>required</td>
     <td>Mark the text field as required.</td>
   </tr>

   <tr>
     <td>rows</td>
     <td>If present the input field will be drawn as textarea. You can specify the number of rows.</td>
   </tr>

   <tr>
      <td>type</td>
      <td>
         The type of the input field - propaget to the underlying <i>input</i> element.
      </td>
   </tr>

   <tr>
      <td>maxlength</td>
      <td>The max. length for the input field.</td>
   </tr>

   <tr>
     <td>(blur)</td>
     <td>The event fires if the input element is loosing the focus.</td>
   </tr>

   <tr>
     <td>(focus)</td>
     <td>The event fires if the input element is getting the focus.</td>
   </tr>


   </tbody>
</table>