Text Fields


{{text1}} {{text2}} 

  


  ]]>
Set max length
  
  ]]>
Text/Numeric with floating label

{{text3}} {{text4}} 
  

  ]]>
Number with min and step restrictions

{{number1}} {{valueType}} 
  
  ]]>
Multiline Textfield
aka Textarea. Add the attribute row to turn the input field to a textarea. Specify maxrows to restrict the possible lines.

{{text5}} 
  
  ]]>
Expandable
Just specify an icon to turn the text input field into an expandable field.

{{text6}} 
  
  ]]>
Attributes of the mdl-textfield component
Attribute Description
autofocus Set the focus on this input field on page load.
disableNativeValidityChecking Is a BooleanProperty that disables the build in native checking to mark the input field as invalid. See https://github.com/mseemann/angular2-mdl/wiki/Mdl-Textfield-and-native-validity-checking for a detailed description.
disabled Disable the text field if present or true.
error-msg The error message that will be shown if the input value did not match the pattern.
floating-label If present or true the label of the text field will be floating if the element has the focus.
icon 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.
label The label of the input field
max Restrict the value for type number to a max value.
maxrows Defines the maximum number of row the component will expand to.
min Restrict the value for type number to a min value.
step Restrict the value for type number to a be based on the given step (e.g. 0.01 for numbers with two decimal places).
ngModel The text field is ngModel compatible.
pattern A regular expression that the input text must conform to. If it dosen't match the error (attribute error-msg) will be shown
placeholder A placeholder string for the input filed.
readonly Mark the text field as readonly.
required Mark the text field as required.
rows If present the input field will be drawn as textarea. You can specify the number of rows.
type The type of the input field - propaget to the underlying input element.
maxlength The max. length for the input field.
(blur) The event fires if the input element is loosing the focus.
(focus) The event fires if the input element is getting the focus.