formatfield

#Formatfield

The formatfield component formats an input field using language sensitive number formatting. It acts as a "pluggable" component and can be added to a mdl-textfield component or to a <input> element.

To include a MDLEXT formatfield component:

 1. Code a single-line mdl-textfield component.

<div class="mdl-textfield mdl-js-textfield">
  <input class="mdl-textfield__input" type="text" 
    pattern="-?[0-9 ]*([\.,][0-9]+)?" value="1234.5">
  <label class="mdl-textfield__label">Number...</label>
  <span class="mdl-textfield__error">Input is not a number!</span>
</div>

 2. Add the mdlext-js-formatfield class to define the element as a formatfield component.

<div class="mdl-textfield mdl-js-textfield mdlext-js-formatfield">
  <input class="mdl-textfield__input" type="text" 
    pattern="-?[0-9 ]*([\.,][0-9]+)?" value="1234.5">
  <label class="mdl-textfield__label">Number...</label>
  <span class="mdl-textfield__error">Input is not a number!</span>
</div>

 3. Optionally add a data-formatfield-options attribute with the given locale. If this step is omitted, the formatfield component uses the browser language as it's locale.

<div class="mdl-textfield mdl-js-textfield mdlext-js-formatfield"
  data-formatfield-options="{'locales': 'nb-NO'}">
  <input class="mdl-textfield__input" type="text" 
    pattern="-?[0-9 ]*([\.,][0-9]+)?" value="1234.5">
  <label class="mdl-textfield__label">Number...</label>
  <span class="mdl-textfield__error">Input is not a number!</span>
</div>

Examples

• The snippets/formatfield.html and the tests provides more detailed examples.
• Try out the live demo

Public methods

getOptions()

Get component configuration options object.

var options = inputElement.MaterialExtFormatfield.getOptions();
console.log('locales', options.locales);

getUnformattedValue()

An unformatted value is a string value where the locale specific decimal separator is replaced with a '.' separator and group separators are stripped. The returned value is suitable for parsing to a JavaScript numerical value.

Example

input.value = '1 234,5';
inputElement.MaterialExtFormatfield.getUnformattedValue();
// Returns '1234.5'

Configuration options

The MDLEXT CSS classes apply various predefined visual and behavioral enhancements to the formatfield.

Available classes and their effects.

MDLEXT class	Effect	Remarks
mdlext-js-formatfield	Assigns basic MDL behavior to formatfield.	Required.

Options

The component can be configured using the data-formatfield-options attribute. The attribute value is a JSON string with properties defined by the Intl.NumberFormat object.

The data-formatfield-options attribute must be a valid JSON string. You can use single or double quotes for the JSON properties.

Example 1, single quotes in JSON options string:

<input class=" mdlext-js-formatfield" type="text"
  data-formatfield-options="{'locales': 'nb-NO', 'minimumFractionDigits': 0, 'maximumFractionDigits': 0}">

Example 2, double quotes in JSON options string:

<input class=" mdlext-js-formatfield" type="text"
  data-formatfield-options='{"locales": "nb-NO", "minimumFractionDigits": 0, "maximumFractionDigits": 0}'>

How to use the component programmatically

The tests and the snippets/formatfield.html provides examples on how to use the component programmatically.