Invision UI v.19.6.0-0

Getting Started

  • Running Invision UI
  • UI Component Anatomy
  • Authoring SCSS
  • Authoring Presentational Behavior

Component Foundations

  • SCSS Authoring
    • Mixins & Variables
    • Stateful Classes
  • State Guidance
    • Empty/Zero State
    • Loading State
  • Utilities
    • Align
    • Display
    • Flexbox
    • Font Size
    • Layout
    • Offset
    • Position
    • Overflow
    • Size
    • Spacing
    • Text
  • Layout
    • Arrange [Deprectated]
    • Divided Columns
    • Embed Video
    • Full and Center
    • Fill [Deprectated]
    • Grid
    • Media Blocks
    • Panels
    • Vertical Layouts
  • Media Queries
  • Angular Behaviors
    • App Theme Directive
    • Auto Focus Input
    • Filters
    • Popup (modal dialog) Manager
    • Tether (tooltip/dropdown) Manager
    • Resize Sensor
    • Watchers

UI Component Library

  • Content & Containment
    • Active Translation
    • Auto Fit Text
    • Address
    • Basic & Input Table
    • Brand Logo/Slogan
    • Call to Action - Empty State
    • Carousel
    • Cart
    • Choice
    • Collapsible Container
    • Copyright Footer
    • Coupon Redeemer
    • Content
    • Date Relative Display
    • Definition Lists
    • Delimited List
    • Details
    • Expiration Date Display
    • Feature Toggle
    • Form Section Heading
    • Header
    • Heading
    • Heading With Annotation
    • Icons
    • Interaction Details
    • Labeled Balance
    • Link
    • Main Container
    • Metadata Card
    • Metadata List Item
    • Offering QuickView
    • Payment Instrument
    • Preference Dialog
    • Pricing Plan Decoration
    • Product Availability
    • Product Details
    • Product Image
    • Quick Info Panel
    • Remark
    • Renewal Column
    • Richlist Filterbar
    • Richlist Wrapper
    • Scrollable Horizontal List
    • Search Card
    • Search Panel
    • Section
    • Selectable Option
    • Smart Truncate
    • Status Grid
    • Tooltip
  • Data Visualizations
    • Bill Runs
    • Comparison Table
    • Datatable
    • Progress Tracker
    • Schedules
    • Query Builder
  • Dialogs
    • Confirmation Dialog
    • Dialog
    • Rich List Dialog
    • Wait Dialog
  • Forms and Filters
    • Additional Properties
    • Autocomplete
    • 3 Field Date Input
    • Checkbox
    • Credit Card
    • Bulk Action Bar
    • Buttons
    • Confirmation Button
    • Date Picker
    • E-Check
    • Entity Specification
    • External Bill
    • External Gift Card
    • Focus Group
    • Forms
    • Filter Bar
    • Filter Dropdowns
    • Gift Card
    • Grouped Check Filters
    • Inputs
    • Input Select Combo
    • Monetary Input
    • Multi Dropdown Selector
    • Multiple Numeric Input
    • Monetary Range Input
    • Password Unmask Button
    • Select
    • Select Button Or Stepper
    • Select Or Text Input
    • Stepper
    • Tag Dropdown
  • Navigation & Flow
    • Back Banner
    • Back Component
    • Breadcrumbs
    • Details Pager
    • Expandable Section
    • Infinite Scroll
    • Open New Window
    • Pager
    • Fancy Richlist
    • Standard Navigator
    • Status Indicator
    • Step Progress Bar
    • Step Progress Indicator
    • Tab Card
    • Tab Panel
    • Tier Navigator
    • Wizard
  • Notifications
    • Loading Indicator
    • Toast Notifications
  • Deprecated
    • Content Area

Showcase

  • General
    • Simplelist
    • Richlist
    • Primary (side) Navigator
  • Customer Care
    • Case Activity List
    • Customer Care Navigator Component
    • Dashboard
    • Decisions
  • Reporting
    • Content Visualization

Unit Testing

  • Actions
  • Components
  • Selectors
  • Reducers

End-to-end Testing

Statistics

Monetary Input

In this section

Overview Variants
  • Default
  • Input Only
  • Constraints
  • IsZeroNull

This component automatically formats monetary amounts according to currency and locale when the field is not focused.

Default

This component will render a monetary input and the wrapping fieldset item with label for common implementations.

HTML
<!-- begin example -->
<div class="t-content" ng-controller="monetaryInputExampleController">
    <ng-form class="c-form c-generalForm" name="monetaryInputExampleController.monetaryInputExampleForm" autocomplete="off">
        <fieldset class="c-fieldset">
            <div class="c-fieldset-item">
                <label for="currency">Currency:</label>
                <div class="c-select">
                    <select ng-model="WithLabel.currency"
                        name="currency"
                        ng-options="value as label for (value, label) in currencyOptions"></select>
                </div>
            </div>
            <div class="c-fieldset-item">
                <label for="lang">Language:</label>
                <div class="c-select">
                    <select ng-model="WithLabel.lang"
                        name="lang"
                        ng-options="value as label for (value, label) in langOptions"></select>
                </div>
            </div>
            <div form-field-locale-key="WithLabel.label">
                <monetary-input
                    name="amount"
                    label="WithLabel.label"
                    ng-model="WithLabel.currencyAmount"
                    currency-code="WithLabel.currency"
                    locale="WithLabel.locale">
                </monetary-input>
            </div>
        </fieldset>
    </ng-form>
</div>
JavaScript
export default function MonetaryInputExampleController($scope) {
    Object.assign($scope, {
        currencyOptions,
        langOptions
    });

    $scope.WithLabel = {
        label: 'Formatted Currency',
        currency: 'EUR',
        lang: 'fr',
        region: 'US',
        get locale() {
            return `${this.lang}-${this.region}`;
        },
        currencyAmount: 77526.8
    };

    $scope.IsZeroNull = {
        label: 'Formatted Currency',
        currency: 'EUR',
        lang: 'fr',
        region: 'US',
        get locale() {
            return `${this.lang}-${this.region}`;
        },
        currencyAmount: null
    };

    $scope.WithoutLabel = {
        label: 'Formatted Currency',
        currency: 'VND',
        lang: 'mr',
        region: 'US',
        get locale() {
            return `${this.lang}-${this.region}`;
        },
        currencyAmount: 322
    };

    $scope.MinMax = {
        label: 'Constrained Currency (0-200)',
        currency: 'USD',
        lang: 'en',
        region: 'US',
        min: 0,
        max: 200,
        get locale() {
            return `${this.lang}-${this.region}`;
        },
        currencyAmount: 322
    };
}

const currencyOptions = {
    AED: 'UAE Dirham',
    AFN: 'Afghan',
    ALL: 'Le',
    AMD: 'Armenian Dram',
    ANG: 'Netherlands Antillean Guilder',
    AOA: 'Kwanza',
    ARS: 'Argentine Peso',
    AUD: 'Australian Dollar',
    AWG: 'Aruban Florin',
    AZN: 'Azerbaijan Manat',
    BAM: 'Convertible Mark',
    BBD: 'Barbados Dolla',
    BDT: 'Taka',
    BGN: 'Bulgarian Lev',
    BHD: 'Bahraini Dinar',
    BIF: 'Burundi Franc',
    BMD: 'Bermudian Dollar',
    BND: 'Brunei Dollar',
    BOB: 'Boliviano',
    BOV: 'Mvdol',
    BRL: 'Brazilian Real',
    BSD: 'Bahamian Dolla',
    BTN: 'Ngultrum',
    BWP: 'Pula',
    BYN: 'Belarusian Ruble',
    BZD: 'Belize Dollar',
    CAD: 'Canadian Dolla',
    CDF: 'Congolese Fran',
    CHE: 'WIR Euro',
    CHF: 'Swiss Fran',
    CHW: 'WIR Franc',
    CLF: 'Unidad de Fomento',
    CLP: 'Chilean Peso',
    CNY: 'Yuan Renminbi',
    COP: 'Colombian Peso',
    COU: 'Unidad de Valor Real',
    CRC: 'Costa Rican Colon',
    CUC: 'Peso Convertible',
    CUP: 'Cuban Peso',
    CVE: 'Cabo Verde Escudo',
    CZK: 'Czech Koruna',
    DJF: 'Djibouti Franc',
    DKK: 'Danish Krone',
    DOP: 'Dominican Peso',
    DZD: 'Algerian Dinar',
    EGP: 'Egyptian Pound',
    ERN: 'Nakfa',
    ETB: 'Ethiopian Birr',
    EUR: 'Euro',
    FJD: 'Fiji Dolla',
    FKP: 'Falkland Islands Pound',
    GBP: 'Pound Sterling',
    GEL: 'Lari',
    GHS: 'Ghana Cedi',
    GIP: 'Gibraltar Poun',
    GMD: 'Dalasi',
    GNF: 'Guinean Franc',
    GTQ: 'Quetza',
    GYD: 'Guyana Dollar',
    HKD: 'Hong Kong Dollar',
    HNL: 'Lempir',
    HRK: 'Kuna',
    HTG: 'Gourde',
    HUF: 'Forint',
    IDR: 'Rupiah',
    ILS: 'New Israeli Sheqel',
    INR: 'Indian Rupee',
    IQD: 'Iraqi Dina',
    IRR: 'Iranian Rial',
    ISK: 'Iceland Krona',
    JMD: 'Jamaican Dolla',
    JOD: 'Jordanian Dina',
    JPY: 'Ye',
    KES: 'Kenyan Shillin',
    KGS: 'So',
    KHR: 'Riel',
    KMF: 'Comorian Franc',
    KPW: 'North Korean Won',
    KRW: 'Wo',
    KWD: 'Kuwaiti Dinar',
    KYD: 'Cayman Islands Dollar',
    KZT: 'Tenge',
    LAK: 'Lao Ki',
    LBP: 'Lebanese Pound',
    LKR: 'Sri Lanka Rupe',
    LRD: 'Liberian Dolla',
    LSL: 'Loti',
    LYD: 'Libyan Dinar',
    MAD: 'Moroccan Dirha',
    MDL: 'Moldovan Leu',
    MGA: 'Malagasy Ariar',
    MKD: 'Denar',
    MMK: 'Kyat',
    MNT: 'Tugrik',
    MOP: 'Pataca',
    MRO: 'Ouguiy',
    MUR: 'Mauritius Rupe',
    MVR: 'Rufiya',
    MWK: 'Malawi Kwacha',
    MXN: 'Mexican Peso',
    MXV: 'Mexican Unidad de Inversion (UDI)',
    MYR: 'Malaysian Ringgit',
    MZN: 'Mozambique Metical',
    NAD: 'Namibia Dollar',
    NGN: 'Naira',
    NIO: 'Cordoba Or',
    NOK: 'Norwegian Kron',
    NPR: 'Nepalese Rupee',
    NZD: 'New Zealand Dollar',
    OMR: 'Rial Omani',
    PAB: 'Balboa',
    PEN: 'So',
    PGK: 'Kina',
    PHP: 'Philippine Pes',
    PKR: 'Pakistan Rupee',
    PLN: 'Zloty',
    PYG: 'Guaran',
    QAR: 'Qatari Ria',
    RON: 'Romanian Leu',
    RSD: 'Serbian Dinar',
    RUB: 'Russian Ruble',
    RWF: 'Rwanda Franc',
    SAR: 'Saudi Riya',
    SBD: 'Solomon Islands Dollar',
    SCR: 'Seychelles Rupee',
    SDG: 'Sudanese Pound',
    SEK: 'Swedish Krona',
    SGD: 'Singapore Dollar',
    SHP: 'Saint Helena Pound',
    SLL: 'Leone',
    SOS: 'Somali Shillin',
    SRD: 'Surinam Dollar',
    SSP: 'South Sudanese Pound',
    STD: 'Dobra',
    SVC: 'El Salvador Colon',
    SYP: 'Syrian Pound',
    SZL: 'Lilangeni',
    THB: 'Baht',
    TJS: 'Somoni',
    TMT: 'Turkmenistan New Manat',
    TND: 'Tunisian Dinar',
    TOP: 'Pa’ang',
    TRY: 'Turkish Lira',
    TTD: 'Trinidad and Tobago Dollar',
    TWD: 'New Taiwan Dollar',
    TZS: 'Tanzanian Shilling',
    UAH: 'Hryvni',
    UGX: 'Uganda Shillin',
    USD: 'US Dollar',
    USN: 'US Dollar (Next day)',
    UYI: 'Uruguay Peso en Unidades Indexadas (URUIURUI)',
    UYU: 'Peso Uruguayo',
    UZS: 'Uzbekistan Sum',
    VEF: 'Bolíva',
    VND: 'Dong',
    VUV: 'Vatu',
    WST: 'Tala',
    XAF: 'CFA Franc BEAC',
    XCD: 'East Caribbean Dollar',
    XDR: 'SDR (Special Drawing Right',
    XOF: 'CFA Franc BCEA',
    XPF: 'CFP Franc',
    XSU: 'Sucre',
    XUA: 'ADB Unit of Accoun',
    YER: 'Yemeni Ria',
    ZAR: 'Rand',
    ZMW: 'Zambian Kwacha',
    ZWL: 'Zimbabwe Dolla'
};

const langOptions = {
    aa: 'Afar',
    ab: 'Abkhaz',
    ae: 'Avestan',
    af: 'Afrikaans',
    ak: 'Akan',
    am: 'Amharic',
    an: 'Aragonese',
    ar: 'Arabic',
    as: 'Assamese',
    av: 'Avaric',
    ay: 'Aymara',
    az: 'Azerbaijani',
    ba: 'Bashkir',
    be: 'Belarusian',
    bg: 'Bulgarian',
    bh: 'Bihari',
    bi: 'Bislama',
    bm: 'Bambara',
    bn: 'Bengali',
    bo: 'Tibetan Standard, Tibetan, Central',
    br: 'Breton',
    bs: 'Bosnian',
    ca: 'Catalan; Valencian',
    ce: 'Chechen',
    ch: 'Chamorro',
    co: 'Corsican',
    cr: 'Cree',
    cs: 'Czech',
    cu: 'Old Church Slavonic, Church Slavic, Church Slavonic, Old',
    cv: 'Chuvash',
    cy: 'Welsh',
    da: 'Danish',
    de: 'German',
    dv: 'Divehi; Dhivehi; Maldivian;',
    dz: 'Dzongkha',
    ee: 'Ewe',
    el: 'Greek, Modern',
    en: 'English',
    eo: 'Esperanto',
    es: 'Spanish; Castilian',
    et: 'Estonian',
    eu: 'Basque',
    fa: 'Persian',
    ff: 'Fula; Fulah; Pulaar; Pular',
    fi: 'Finnish',
    fj: 'Fijian',
    fo: 'Faroese',
    fr: 'French',
    fy: 'Western Frisian',
    ga: 'Irish',
    gd: 'Scottish Gaelic; Gaelic',
    gl: 'Galician',
    gn: 'Guaraní',
    gu: 'Gujarati',
    gv: 'Manx',
    ha: 'Hausa',
    he: 'Hebrew (modern)',
    hi: 'Hindi',
    ho: 'Hiri Motu',
    hr: 'Croatian',
    ht: 'Haitian; Haitian Creole',
    hu: 'Hungarian',
    hy: 'Armenian',
    hz: 'Herero',
    ia: 'Interlingua',
    id: 'Indonesian',
    ie: 'Interlingue',
    ig: 'Igbo',
    ii: 'Nuosu',
    ik: 'Inupiaq',
    io: 'Ido',
    is: 'Icelandic',
    it: 'Italian',
    iu: 'Inuktitut',
    ja: 'Japanese',
    jv: 'Javanese',
    ka: 'Georgian',
    kg: 'Kongo',
    ki: 'Kikuyu, Gikuyu',
    kj: 'Kwanyama, Kuanyama',
    kk: 'Kazakh',
    kl: 'Kalaallisut, Greenlandic',
    km: 'Khmer',
    kn: 'Kannada',
    ko: 'Korean',
    kr: 'Kanuri',
    ks: 'Kashmiri',
    ku: 'Kurdish',
    kv: 'Komi',
    kw: 'Cornish',
    ky: 'Kyrgyz',
    la: 'Latin',
    lb: 'Luxembourgish, Letzeburgesch',
    lg: 'Ganda',
    li: 'Limburgish, Limburgan, Limburger',
    ln: 'Lingala',
    lo: 'Lao',
    lt: 'Lithuanian',
    lu: 'Luba-Katanga',
    lv: 'Latvian',
    mg: 'Malagasy',
    mh: 'Marshallese',
    mi: 'Māori',
    mk: 'Macedonian',
    ml: 'Malayalam',
    mn: 'Mongolian',
    mr: 'Marathi (Marāṭhī)',
    ms: 'Malay',
    mt: 'Maltese',
    my: 'Burmese',
    na: 'Nauru',
    nb: 'Norwegian Bokmål',
    nd: 'North Ndebele',
    ne: 'Nepali',
    ng: 'Ndonga',
    nl: 'Dutch',
    nn: 'Norwegian Nynorsk',
    no: 'Norwegian',
    nr: 'South Ndebele',
    nv: 'Navajo, Navaho',
    ny: 'Chichewa; Chewa; Nyanja',
    oc: 'Occitan',
    oj: 'Ojibwe, Ojibwa',
    om: 'Oromo',
    or: 'Oriya',
    os: 'Ossetian, Ossetic',
    pa: 'Panjabi, Punjabi',
    pi: 'Pāli',
    pl: 'Polish',
    ps: 'Pashto, Pushto',
    pt: 'Portuguese',
    qu: 'Quechua',
    rm: 'Romansh',
    rn: 'Kirundi',
    ro: 'Romanian, Moldavian, Moldovan',
    ru: 'Russian',
    rw: 'Kinyarwanda',
    sa: 'Sanskrit (Saṁskṛta)',
    sc: 'Sardinian',
    sd: 'Sindhi',
    se: 'Northern Sami',
    sg: 'Sango',
    si: 'Sinhala, Sinhalese',
    sk: 'Slovak',
    sl: 'Slovene',
    sm: 'Samoan',
    sn: 'Shona',
    so: 'Somali',
    sq: 'Albanian',
    sr: 'Serbian',
    ss: 'Swati',
    st: 'Southern Sotho',
    su: 'Sundanese',
    sv: 'Swedish',
    sw: 'Swahili',
    ta: 'Tamil',
    te: 'Telugu',
    tg: 'Tajik',
    th: 'Thai',
    ti: 'Tigrinya',
    tk: 'Turkmen',
    tl: 'Tagalog',
    tn: 'Tswana',
    to: 'Tonga (Tonga Islands)',
    tr: 'Turkish',
    ts: 'Tsonga',
    tt: 'Tatar',
    tw: 'Twi',
    ty: 'Tahitian',
    ug: 'Uighur, Uyghur',
    uk: 'Ukrainian',
    ur: 'Urdu',
    uz: 'Uzbek',
    ve: 'Venda',
    vi: 'Vietnamese',
    vk: 'Viking',
    vo: 'Volapük',
    wa: 'Walloon',
    wo: 'Wolof',
    xh: 'Xhosa',
    yi: 'Yiddish',
    yo: 'Yoruba',
    za: 'Zhuang, Chuang',
    zh: 'Chinese',
    zu: 'Zulu'
};

Input Only

This will render just the monetary input.

HTML
<!-- begin example -->
<div class="t-content" ng-controller="monetaryInputExampleController">
    <ng-form class="c-form c-generalForm" name="monetaryInputExampleController.monetaryInputExampleForm" autocomplete="off">
        <fieldset class="c-fieldset">
            <div class="c-fieldset-item">
                <label for="currency">Currency:</label>
                <div class="c-select">
                    <select ng-model="WithoutLabel.currency"
                        name="currency"
                        ng-options="value as label for (value, label) in currencyOptions"></select>
                </div>
            </div>
            <div class="c-fieldset-item">
                <label for="lang">Language:</label>
                <div class="c-select">
                    <select ng-model="WithoutLabel.lang"
                        name="lang"
                        ng-options="value as label for (value, label) in langOptions"></select>
                </div>
            </div>
            <div class="c-fieldset-item"
                form-field-locale-key="WithoutLabel.label"
                form-field-error-state="amount">
                <label for="amount" ng-bind="WithoutLabel.label"></label>
                <monetary-input
                    name="amount"
                    input-only="true"
                    ng-model="WithoutLabel.currencyAmount"
                    currency-code="WithoutLabel.currency"
                    locale="WithoutLabel.locale">
                </monetary-input>
                <form-field-error-messages></form-field-error-messages>
            </div>
        </fieldset>
    </ng-form>
</div>
JavaScript
export default function MonetaryInputExampleController($scope) {
    Object.assign($scope, {
        currencyOptions,
        langOptions
    });

    $scope.WithLabel = {
        label: 'Formatted Currency',
        currency: 'EUR',
        lang: 'fr',
        region: 'US',
        get locale() {
            return `${this.lang}-${this.region}`;
        },
        currencyAmount: 77526.8
    };

    $scope.IsZeroNull = {
        label: 'Formatted Currency',
        currency: 'EUR',
        lang: 'fr',
        region: 'US',
        get locale() {
            return `${this.lang}-${this.region}`;
        },
        currencyAmount: null
    };

    $scope.WithoutLabel = {
        label: 'Formatted Currency',
        currency: 'VND',
        lang: 'mr',
        region: 'US',
        get locale() {
            return `${this.lang}-${this.region}`;
        },
        currencyAmount: 322
    };

    $scope.MinMax = {
        label: 'Constrained Currency (0-200)',
        currency: 'USD',
        lang: 'en',
        region: 'US',
        min: 0,
        max: 200,
        get locale() {
            return `${this.lang}-${this.region}`;
        },
        currencyAmount: 322
    };
}

const currencyOptions = {
    AED: 'UAE Dirham',
    AFN: 'Afghan',
    ALL: 'Le',
    AMD: 'Armenian Dram',
    ANG: 'Netherlands Antillean Guilder',
    AOA: 'Kwanza',
    ARS: 'Argentine Peso',
    AUD: 'Australian Dollar',
    AWG: 'Aruban Florin',
    AZN: 'Azerbaijan Manat',
    BAM: 'Convertible Mark',
    BBD: 'Barbados Dolla',
    BDT: 'Taka',
    BGN: 'Bulgarian Lev',
    BHD: 'Bahraini Dinar',
    BIF: 'Burundi Franc',
    BMD: 'Bermudian Dollar',
    BND: 'Brunei Dollar',
    BOB: 'Boliviano',
    BOV: 'Mvdol',
    BRL: 'Brazilian Real',
    BSD: 'Bahamian Dolla',
    BTN: 'Ngultrum',
    BWP: 'Pula',
    BYN: 'Belarusian Ruble',
    BZD: 'Belize Dollar',
    CAD: 'Canadian Dolla',
    CDF: 'Congolese Fran',
    CHE: 'WIR Euro',
    CHF: 'Swiss Fran',
    CHW: 'WIR Franc',
    CLF: 'Unidad de Fomento',
    CLP: 'Chilean Peso',
    CNY: 'Yuan Renminbi',
    COP: 'Colombian Peso',
    COU: 'Unidad de Valor Real',
    CRC: 'Costa Rican Colon',
    CUC: 'Peso Convertible',
    CUP: 'Cuban Peso',
    CVE: 'Cabo Verde Escudo',
    CZK: 'Czech Koruna',
    DJF: 'Djibouti Franc',
    DKK: 'Danish Krone',
    DOP: 'Dominican Peso',
    DZD: 'Algerian Dinar',
    EGP: 'Egyptian Pound',
    ERN: 'Nakfa',
    ETB: 'Ethiopian Birr',
    EUR: 'Euro',
    FJD: 'Fiji Dolla',
    FKP: 'Falkland Islands Pound',
    GBP: 'Pound Sterling',
    GEL: 'Lari',
    GHS: 'Ghana Cedi',
    GIP: 'Gibraltar Poun',
    GMD: 'Dalasi',
    GNF: 'Guinean Franc',
    GTQ: 'Quetza',
    GYD: 'Guyana Dollar',
    HKD: 'Hong Kong Dollar',
    HNL: 'Lempir',
    HRK: 'Kuna',
    HTG: 'Gourde',
    HUF: 'Forint',
    IDR: 'Rupiah',
    ILS: 'New Israeli Sheqel',
    INR: 'Indian Rupee',
    IQD: 'Iraqi Dina',
    IRR: 'Iranian Rial',
    ISK: 'Iceland Krona',
    JMD: 'Jamaican Dolla',
    JOD: 'Jordanian Dina',
    JPY: 'Ye',
    KES: 'Kenyan Shillin',
    KGS: 'So',
    KHR: 'Riel',
    KMF: 'Comorian Franc',
    KPW: 'North Korean Won',
    KRW: 'Wo',
    KWD: 'Kuwaiti Dinar',
    KYD: 'Cayman Islands Dollar',
    KZT: 'Tenge',
    LAK: 'Lao Ki',
    LBP: 'Lebanese Pound',
    LKR: 'Sri Lanka Rupe',
    LRD: 'Liberian Dolla',
    LSL: 'Loti',
    LYD: 'Libyan Dinar',
    MAD: 'Moroccan Dirha',
    MDL: 'Moldovan Leu',
    MGA: 'Malagasy Ariar',
    MKD: 'Denar',
    MMK: 'Kyat',
    MNT: 'Tugrik',
    MOP: 'Pataca',
    MRO: 'Ouguiy',
    MUR: 'Mauritius Rupe',
    MVR: 'Rufiya',
    MWK: 'Malawi Kwacha',
    MXN: 'Mexican Peso',
    MXV: 'Mexican Unidad de Inversion (UDI)',
    MYR: 'Malaysian Ringgit',
    MZN: 'Mozambique Metical',
    NAD: 'Namibia Dollar',
    NGN: 'Naira',
    NIO: 'Cordoba Or',
    NOK: 'Norwegian Kron',
    NPR: 'Nepalese Rupee',
    NZD: 'New Zealand Dollar',
    OMR: 'Rial Omani',
    PAB: 'Balboa',
    PEN: 'So',
    PGK: 'Kina',
    PHP: 'Philippine Pes',
    PKR: 'Pakistan Rupee',
    PLN: 'Zloty',
    PYG: 'Guaran',
    QAR: 'Qatari Ria',
    RON: 'Romanian Leu',
    RSD: 'Serbian Dinar',
    RUB: 'Russian Ruble',
    RWF: 'Rwanda Franc',
    SAR: 'Saudi Riya',
    SBD: 'Solomon Islands Dollar',
    SCR: 'Seychelles Rupee',
    SDG: 'Sudanese Pound',
    SEK: 'Swedish Krona',
    SGD: 'Singapore Dollar',
    SHP: 'Saint Helena Pound',
    SLL: 'Leone',
    SOS: 'Somali Shillin',
    SRD: 'Surinam Dollar',
    SSP: 'South Sudanese Pound',
    STD: 'Dobra',
    SVC: 'El Salvador Colon',
    SYP: 'Syrian Pound',
    SZL: 'Lilangeni',
    THB: 'Baht',
    TJS: 'Somoni',
    TMT: 'Turkmenistan New Manat',
    TND: 'Tunisian Dinar',
    TOP: 'Pa’ang',
    TRY: 'Turkish Lira',
    TTD: 'Trinidad and Tobago Dollar',
    TWD: 'New Taiwan Dollar',
    TZS: 'Tanzanian Shilling',
    UAH: 'Hryvni',
    UGX: 'Uganda Shillin',
    USD: 'US Dollar',
    USN: 'US Dollar (Next day)',
    UYI: 'Uruguay Peso en Unidades Indexadas (URUIURUI)',
    UYU: 'Peso Uruguayo',
    UZS: 'Uzbekistan Sum',
    VEF: 'Bolíva',
    VND: 'Dong',
    VUV: 'Vatu',
    WST: 'Tala',
    XAF: 'CFA Franc BEAC',
    XCD: 'East Caribbean Dollar',
    XDR: 'SDR (Special Drawing Right',
    XOF: 'CFA Franc BCEA',
    XPF: 'CFP Franc',
    XSU: 'Sucre',
    XUA: 'ADB Unit of Accoun',
    YER: 'Yemeni Ria',
    ZAR: 'Rand',
    ZMW: 'Zambian Kwacha',
    ZWL: 'Zimbabwe Dolla'
};

const langOptions = {
    aa: 'Afar',
    ab: 'Abkhaz',
    ae: 'Avestan',
    af: 'Afrikaans',
    ak: 'Akan',
    am: 'Amharic',
    an: 'Aragonese',
    ar: 'Arabic',
    as: 'Assamese',
    av: 'Avaric',
    ay: 'Aymara',
    az: 'Azerbaijani',
    ba: 'Bashkir',
    be: 'Belarusian',
    bg: 'Bulgarian',
    bh: 'Bihari',
    bi: 'Bislama',
    bm: 'Bambara',
    bn: 'Bengali',
    bo: 'Tibetan Standard, Tibetan, Central',
    br: 'Breton',
    bs: 'Bosnian',
    ca: 'Catalan; Valencian',
    ce: 'Chechen',
    ch: 'Chamorro',
    co: 'Corsican',
    cr: 'Cree',
    cs: 'Czech',
    cu: 'Old Church Slavonic, Church Slavic, Church Slavonic, Old',
    cv: 'Chuvash',
    cy: 'Welsh',
    da: 'Danish',
    de: 'German',
    dv: 'Divehi; Dhivehi; Maldivian;',
    dz: 'Dzongkha',
    ee: 'Ewe',
    el: 'Greek, Modern',
    en: 'English',
    eo: 'Esperanto',
    es: 'Spanish; Castilian',
    et: 'Estonian',
    eu: 'Basque',
    fa: 'Persian',
    ff: 'Fula; Fulah; Pulaar; Pular',
    fi: 'Finnish',
    fj: 'Fijian',
    fo: 'Faroese',
    fr: 'French',
    fy: 'Western Frisian',
    ga: 'Irish',
    gd: 'Scottish Gaelic; Gaelic',
    gl: 'Galician',
    gn: 'Guaraní',
    gu: 'Gujarati',
    gv: 'Manx',
    ha: 'Hausa',
    he: 'Hebrew (modern)',
    hi: 'Hindi',
    ho: 'Hiri Motu',
    hr: 'Croatian',
    ht: 'Haitian; Haitian Creole',
    hu: 'Hungarian',
    hy: 'Armenian',
    hz: 'Herero',
    ia: 'Interlingua',
    id: 'Indonesian',
    ie: 'Interlingue',
    ig: 'Igbo',
    ii: 'Nuosu',
    ik: 'Inupiaq',
    io: 'Ido',
    is: 'Icelandic',
    it: 'Italian',
    iu: 'Inuktitut',
    ja: 'Japanese',
    jv: 'Javanese',
    ka: 'Georgian',
    kg: 'Kongo',
    ki: 'Kikuyu, Gikuyu',
    kj: 'Kwanyama, Kuanyama',
    kk: 'Kazakh',
    kl: 'Kalaallisut, Greenlandic',
    km: 'Khmer',
    kn: 'Kannada',
    ko: 'Korean',
    kr: 'Kanuri',
    ks: 'Kashmiri',
    ku: 'Kurdish',
    kv: 'Komi',
    kw: 'Cornish',
    ky: 'Kyrgyz',
    la: 'Latin',
    lb: 'Luxembourgish, Letzeburgesch',
    lg: 'Ganda',
    li: 'Limburgish, Limburgan, Limburger',
    ln: 'Lingala',
    lo: 'Lao',
    lt: 'Lithuanian',
    lu: 'Luba-Katanga',
    lv: 'Latvian',
    mg: 'Malagasy',
    mh: 'Marshallese',
    mi: 'Māori',
    mk: 'Macedonian',
    ml: 'Malayalam',
    mn: 'Mongolian',
    mr: 'Marathi (Marāṭhī)',
    ms: 'Malay',
    mt: 'Maltese',
    my: 'Burmese',
    na: 'Nauru',
    nb: 'Norwegian Bokmål',
    nd: 'North Ndebele',
    ne: 'Nepali',
    ng: 'Ndonga',
    nl: 'Dutch',
    nn: 'Norwegian Nynorsk',
    no: 'Norwegian',
    nr: 'South Ndebele',
    nv: 'Navajo, Navaho',
    ny: 'Chichewa; Chewa; Nyanja',
    oc: 'Occitan',
    oj: 'Ojibwe, Ojibwa',
    om: 'Oromo',
    or: 'Oriya',
    os: 'Ossetian, Ossetic',
    pa: 'Panjabi, Punjabi',
    pi: 'Pāli',
    pl: 'Polish',
    ps: 'Pashto, Pushto',
    pt: 'Portuguese',
    qu: 'Quechua',
    rm: 'Romansh',
    rn: 'Kirundi',
    ro: 'Romanian, Moldavian, Moldovan',
    ru: 'Russian',
    rw: 'Kinyarwanda',
    sa: 'Sanskrit (Saṁskṛta)',
    sc: 'Sardinian',
    sd: 'Sindhi',
    se: 'Northern Sami',
    sg: 'Sango',
    si: 'Sinhala, Sinhalese',
    sk: 'Slovak',
    sl: 'Slovene',
    sm: 'Samoan',
    sn: 'Shona',
    so: 'Somali',
    sq: 'Albanian',
    sr: 'Serbian',
    ss: 'Swati',
    st: 'Southern Sotho',
    su: 'Sundanese',
    sv: 'Swedish',
    sw: 'Swahili',
    ta: 'Tamil',
    te: 'Telugu',
    tg: 'Tajik',
    th: 'Thai',
    ti: 'Tigrinya',
    tk: 'Turkmen',
    tl: 'Tagalog',
    tn: 'Tswana',
    to: 'Tonga (Tonga Islands)',
    tr: 'Turkish',
    ts: 'Tsonga',
    tt: 'Tatar',
    tw: 'Twi',
    ty: 'Tahitian',
    ug: 'Uighur, Uyghur',
    uk: 'Ukrainian',
    ur: 'Urdu',
    uz: 'Uzbek',
    ve: 'Venda',
    vi: 'Vietnamese',
    vk: 'Viking',
    vo: 'Volapük',
    wa: 'Walloon',
    wo: 'Wolof',
    xh: 'Xhosa',
    yi: 'Yiddish',
    yo: 'Yoruba',
    za: 'Zhuang, Chuang',
    zh: 'Chinese',
    zu: 'Zulu'
};

Constraints

Optional minimum and maximum values can be used to constrain valid input. Hitting 'Space' will toggle the maximum available value if set.

HTML
<!-- begin example -->
<div class="t-content" ng-controller="monetaryInputExampleController">
    <ng-form class="c-form c-generalForm" name="monetaryInputExampleController.monetaryInputExampleForm" autocomplete="off">
        <fieldset class="c-fieldset">
            <div class="c-fieldset-item">
                <label for="currency">Currency:</label>
                <div class="c-select">
                    <select ng-model="MinMax.currency"
                        name="currency"
                        ng-options="value as label for (value, label) in currencyOptions"></select>
                </div>
            </div>
            <div class="c-fieldset-item">
                <label for="lang">Language:</label>
                <div class="c-select">
                    <select ng-model="MinMax.lang"
                        name="lang"
                        ng-options="value as label for (value, label) in langOptions"></select>
                </div>
            </div>
            <div form-field-locale-key="MinMax.label">
                <monetary-input
                    name="amount"
                    label="MinMax.label"
                    ng-model="MinMax.currencyAmount"
                    currency-code="MinMax.currency"
                    min-currency="MinMax.min"
                    max-currency="MinMax.max"
                    locale="MinMax.locale">
                </monetary-input>
            </div>
        </fieldset>
    </ng-form>
</div>
JavaScript
export default function MonetaryInputExampleController($scope) {
    Object.assign($scope, {
        currencyOptions,
        langOptions
    });

    $scope.WithLabel = {
        label: 'Formatted Currency',
        currency: 'EUR',
        lang: 'fr',
        region: 'US',
        get locale() {
            return `${this.lang}-${this.region}`;
        },
        currencyAmount: 77526.8
    };

    $scope.IsZeroNull = {
        label: 'Formatted Currency',
        currency: 'EUR',
        lang: 'fr',
        region: 'US',
        get locale() {
            return `${this.lang}-${this.region}`;
        },
        currencyAmount: null
    };

    $scope.WithoutLabel = {
        label: 'Formatted Currency',
        currency: 'VND',
        lang: 'mr',
        region: 'US',
        get locale() {
            return `${this.lang}-${this.region}`;
        },
        currencyAmount: 322
    };

    $scope.MinMax = {
        label: 'Constrained Currency (0-200)',
        currency: 'USD',
        lang: 'en',
        region: 'US',
        min: 0,
        max: 200,
        get locale() {
            return `${this.lang}-${this.region}`;
        },
        currencyAmount: 322
    };
}

const currencyOptions = {
    AED: 'UAE Dirham',
    AFN: 'Afghan',
    ALL: 'Le',
    AMD: 'Armenian Dram',
    ANG: 'Netherlands Antillean Guilder',
    AOA: 'Kwanza',
    ARS: 'Argentine Peso',
    AUD: 'Australian Dollar',
    AWG: 'Aruban Florin',
    AZN: 'Azerbaijan Manat',
    BAM: 'Convertible Mark',
    BBD: 'Barbados Dolla',
    BDT: 'Taka',
    BGN: 'Bulgarian Lev',
    BHD: 'Bahraini Dinar',
    BIF: 'Burundi Franc',
    BMD: 'Bermudian Dollar',
    BND: 'Brunei Dollar',
    BOB: 'Boliviano',
    BOV: 'Mvdol',
    BRL: 'Brazilian Real',
    BSD: 'Bahamian Dolla',
    BTN: 'Ngultrum',
    BWP: 'Pula',
    BYN: 'Belarusian Ruble',
    BZD: 'Belize Dollar',
    CAD: 'Canadian Dolla',
    CDF: 'Congolese Fran',
    CHE: 'WIR Euro',
    CHF: 'Swiss Fran',
    CHW: 'WIR Franc',
    CLF: 'Unidad de Fomento',
    CLP: 'Chilean Peso',
    CNY: 'Yuan Renminbi',
    COP: 'Colombian Peso',
    COU: 'Unidad de Valor Real',
    CRC: 'Costa Rican Colon',
    CUC: 'Peso Convertible',
    CUP: 'Cuban Peso',
    CVE: 'Cabo Verde Escudo',
    CZK: 'Czech Koruna',
    DJF: 'Djibouti Franc',
    DKK: 'Danish Krone',
    DOP: 'Dominican Peso',
    DZD: 'Algerian Dinar',
    EGP: 'Egyptian Pound',
    ERN: 'Nakfa',
    ETB: 'Ethiopian Birr',
    EUR: 'Euro',
    FJD: 'Fiji Dolla',
    FKP: 'Falkland Islands Pound',
    GBP: 'Pound Sterling',
    GEL: 'Lari',
    GHS: 'Ghana Cedi',
    GIP: 'Gibraltar Poun',
    GMD: 'Dalasi',
    GNF: 'Guinean Franc',
    GTQ: 'Quetza',
    GYD: 'Guyana Dollar',
    HKD: 'Hong Kong Dollar',
    HNL: 'Lempir',
    HRK: 'Kuna',
    HTG: 'Gourde',
    HUF: 'Forint',
    IDR: 'Rupiah',
    ILS: 'New Israeli Sheqel',
    INR: 'Indian Rupee',
    IQD: 'Iraqi Dina',
    IRR: 'Iranian Rial',
    ISK: 'Iceland Krona',
    JMD: 'Jamaican Dolla',
    JOD: 'Jordanian Dina',
    JPY: 'Ye',
    KES: 'Kenyan Shillin',
    KGS: 'So',
    KHR: 'Riel',
    KMF: 'Comorian Franc',
    KPW: 'North Korean Won',
    KRW: 'Wo',
    KWD: 'Kuwaiti Dinar',
    KYD: 'Cayman Islands Dollar',
    KZT: 'Tenge',
    LAK: 'Lao Ki',
    LBP: 'Lebanese Pound',
    LKR: 'Sri Lanka Rupe',
    LRD: 'Liberian Dolla',
    LSL: 'Loti',
    LYD: 'Libyan Dinar',
    MAD: 'Moroccan Dirha',
    MDL: 'Moldovan Leu',
    MGA: 'Malagasy Ariar',
    MKD: 'Denar',
    MMK: 'Kyat',
    MNT: 'Tugrik',
    MOP: 'Pataca',
    MRO: 'Ouguiy',
    MUR: 'Mauritius Rupe',
    MVR: 'Rufiya',
    MWK: 'Malawi Kwacha',
    MXN: 'Mexican Peso',
    MXV: 'Mexican Unidad de Inversion (UDI)',
    MYR: 'Malaysian Ringgit',
    MZN: 'Mozambique Metical',
    NAD: 'Namibia Dollar',
    NGN: 'Naira',
    NIO: 'Cordoba Or',
    NOK: 'Norwegian Kron',
    NPR: 'Nepalese Rupee',
    NZD: 'New Zealand Dollar',
    OMR: 'Rial Omani',
    PAB: 'Balboa',
    PEN: 'So',
    PGK: 'Kina',
    PHP: 'Philippine Pes',
    PKR: 'Pakistan Rupee',
    PLN: 'Zloty',
    PYG: 'Guaran',
    QAR: 'Qatari Ria',
    RON: 'Romanian Leu',
    RSD: 'Serbian Dinar',
    RUB: 'Russian Ruble',
    RWF: 'Rwanda Franc',
    SAR: 'Saudi Riya',
    SBD: 'Solomon Islands Dollar',
    SCR: 'Seychelles Rupee',
    SDG: 'Sudanese Pound',
    SEK: 'Swedish Krona',
    SGD: 'Singapore Dollar',
    SHP: 'Saint Helena Pound',
    SLL: 'Leone',
    SOS: 'Somali Shillin',
    SRD: 'Surinam Dollar',
    SSP: 'South Sudanese Pound',
    STD: 'Dobra',
    SVC: 'El Salvador Colon',
    SYP: 'Syrian Pound',
    SZL: 'Lilangeni',
    THB: 'Baht',
    TJS: 'Somoni',
    TMT: 'Turkmenistan New Manat',
    TND: 'Tunisian Dinar',
    TOP: 'Pa’ang',
    TRY: 'Turkish Lira',
    TTD: 'Trinidad and Tobago Dollar',
    TWD: 'New Taiwan Dollar',
    TZS: 'Tanzanian Shilling',
    UAH: 'Hryvni',
    UGX: 'Uganda Shillin',
    USD: 'US Dollar',
    USN: 'US Dollar (Next day)',
    UYI: 'Uruguay Peso en Unidades Indexadas (URUIURUI)',
    UYU: 'Peso Uruguayo',
    UZS: 'Uzbekistan Sum',
    VEF: 'Bolíva',
    VND: 'Dong',
    VUV: 'Vatu',
    WST: 'Tala',
    XAF: 'CFA Franc BEAC',
    XCD: 'East Caribbean Dollar',
    XDR: 'SDR (Special Drawing Right',
    XOF: 'CFA Franc BCEA',
    XPF: 'CFP Franc',
    XSU: 'Sucre',
    XUA: 'ADB Unit of Accoun',
    YER: 'Yemeni Ria',
    ZAR: 'Rand',
    ZMW: 'Zambian Kwacha',
    ZWL: 'Zimbabwe Dolla'
};

const langOptions = {
    aa: 'Afar',
    ab: 'Abkhaz',
    ae: 'Avestan',
    af: 'Afrikaans',
    ak: 'Akan',
    am: 'Amharic',
    an: 'Aragonese',
    ar: 'Arabic',
    as: 'Assamese',
    av: 'Avaric',
    ay: 'Aymara',
    az: 'Azerbaijani',
    ba: 'Bashkir',
    be: 'Belarusian',
    bg: 'Bulgarian',
    bh: 'Bihari',
    bi: 'Bislama',
    bm: 'Bambara',
    bn: 'Bengali',
    bo: 'Tibetan Standard, Tibetan, Central',
    br: 'Breton',
    bs: 'Bosnian',
    ca: 'Catalan; Valencian',
    ce: 'Chechen',
    ch: 'Chamorro',
    co: 'Corsican',
    cr: 'Cree',
    cs: 'Czech',
    cu: 'Old Church Slavonic, Church Slavic, Church Slavonic, Old',
    cv: 'Chuvash',
    cy: 'Welsh',
    da: 'Danish',
    de: 'German',
    dv: 'Divehi; Dhivehi; Maldivian;',
    dz: 'Dzongkha',
    ee: 'Ewe',
    el: 'Greek, Modern',
    en: 'English',
    eo: 'Esperanto',
    es: 'Spanish; Castilian',
    et: 'Estonian',
    eu: 'Basque',
    fa: 'Persian',
    ff: 'Fula; Fulah; Pulaar; Pular',
    fi: 'Finnish',
    fj: 'Fijian',
    fo: 'Faroese',
    fr: 'French',
    fy: 'Western Frisian',
    ga: 'Irish',
    gd: 'Scottish Gaelic; Gaelic',
    gl: 'Galician',
    gn: 'Guaraní',
    gu: 'Gujarati',
    gv: 'Manx',
    ha: 'Hausa',
    he: 'Hebrew (modern)',
    hi: 'Hindi',
    ho: 'Hiri Motu',
    hr: 'Croatian',
    ht: 'Haitian; Haitian Creole',
    hu: 'Hungarian',
    hy: 'Armenian',
    hz: 'Herero',
    ia: 'Interlingua',
    id: 'Indonesian',
    ie: 'Interlingue',
    ig: 'Igbo',
    ii: 'Nuosu',
    ik: 'Inupiaq',
    io: 'Ido',
    is: 'Icelandic',
    it: 'Italian',
    iu: 'Inuktitut',
    ja: 'Japanese',
    jv: 'Javanese',
    ka: 'Georgian',
    kg: 'Kongo',
    ki: 'Kikuyu, Gikuyu',
    kj: 'Kwanyama, Kuanyama',
    kk: 'Kazakh',
    kl: 'Kalaallisut, Greenlandic',
    km: 'Khmer',
    kn: 'Kannada',
    ko: 'Korean',
    kr: 'Kanuri',
    ks: 'Kashmiri',
    ku: 'Kurdish',
    kv: 'Komi',
    kw: 'Cornish',
    ky: 'Kyrgyz',
    la: 'Latin',
    lb: 'Luxembourgish, Letzeburgesch',
    lg: 'Ganda',
    li: 'Limburgish, Limburgan, Limburger',
    ln: 'Lingala',
    lo: 'Lao',
    lt: 'Lithuanian',
    lu: 'Luba-Katanga',
    lv: 'Latvian',
    mg: 'Malagasy',
    mh: 'Marshallese',
    mi: 'Māori',
    mk: 'Macedonian',
    ml: 'Malayalam',
    mn: 'Mongolian',
    mr: 'Marathi (Marāṭhī)',
    ms: 'Malay',
    mt: 'Maltese',
    my: 'Burmese',
    na: 'Nauru',
    nb: 'Norwegian Bokmål',
    nd: 'North Ndebele',
    ne: 'Nepali',
    ng: 'Ndonga',
    nl: 'Dutch',
    nn: 'Norwegian Nynorsk',
    no: 'Norwegian',
    nr: 'South Ndebele',
    nv: 'Navajo, Navaho',
    ny: 'Chichewa; Chewa; Nyanja',
    oc: 'Occitan',
    oj: 'Ojibwe, Ojibwa',
    om: 'Oromo',
    or: 'Oriya',
    os: 'Ossetian, Ossetic',
    pa: 'Panjabi, Punjabi',
    pi: 'Pāli',
    pl: 'Polish',
    ps: 'Pashto, Pushto',
    pt: 'Portuguese',
    qu: 'Quechua',
    rm: 'Romansh',
    rn: 'Kirundi',
    ro: 'Romanian, Moldavian, Moldovan',
    ru: 'Russian',
    rw: 'Kinyarwanda',
    sa: 'Sanskrit (Saṁskṛta)',
    sc: 'Sardinian',
    sd: 'Sindhi',
    se: 'Northern Sami',
    sg: 'Sango',
    si: 'Sinhala, Sinhalese',
    sk: 'Slovak',
    sl: 'Slovene',
    sm: 'Samoan',
    sn: 'Shona',
    so: 'Somali',
    sq: 'Albanian',
    sr: 'Serbian',
    ss: 'Swati',
    st: 'Southern Sotho',
    su: 'Sundanese',
    sv: 'Swedish',
    sw: 'Swahili',
    ta: 'Tamil',
    te: 'Telugu',
    tg: 'Tajik',
    th: 'Thai',
    ti: 'Tigrinya',
    tk: 'Turkmen',
    tl: 'Tagalog',
    tn: 'Tswana',
    to: 'Tonga (Tonga Islands)',
    tr: 'Turkish',
    ts: 'Tsonga',
    tt: 'Tatar',
    tw: 'Twi',
    ty: 'Tahitian',
    ug: 'Uighur, Uyghur',
    uk: 'Ukrainian',
    ur: 'Urdu',
    uz: 'Uzbek',
    ve: 'Venda',
    vi: 'Vietnamese',
    vk: 'Viking',
    vo: 'Volapük',
    wa: 'Walloon',
    wo: 'Wolof',
    xh: 'Xhosa',
    yi: 'Yiddish',
    yo: 'Yoruba',
    za: 'Zhuang, Chuang',
    zh: 'Chinese',
    zu: 'Zulu'
};

IsZeroNull

Optional field if set to true that will still display 0 but use null as the value in the data model

HTML
<!-- begin example -->
<div class="t-content" ng-controller="monetaryInputExampleController">
    <ng-form class="c-form c-generalForm" name="monetaryInputExampleController.monetaryInputExampleForm" autocomplete="off">
        <fieldset class="c-fieldset">
            <div class="c-fieldset-item">
                <label for="currency">Currency:</label>
                <div class="c-select">
                    <select ng-model="IsZeroNull.currency"
                            name="currency"
                            ng-options="value as label for (value, label) in currencyOptions"></select>
                </div>
            </div>
            <div class="c-fieldset-item">
                <label for="lang">Language:</label>
                <div class="c-select">
                    <select ng-model="IsZeroNull.lang"
                            name="lang"
                            ng-options="value as label for (value, label) in langOptions"></select>
                </div>
            </div>
            <div class="c-fieldset-item">
                <label for="value">Value:</label>
                <div ng-bind="IsZeroNull.currencyAmount | json"></div>
            </div>
            <div form-field-locale-key="IsZeroNull.label">
                <monetary-input
                    name="amount"
                    label="IsZeroNull.label"
                    ng-model="IsZeroNull.currencyAmount"
                    is-zero-null="true"
                    currency-code="IsZeroNull.currency"
                    locale="IsZeroNull.locale">
                </monetary-input>
            </div>
        </fieldset>
    </ng-form>
</div>
JavaScript
export default function MonetaryInputExampleController($scope) {
    Object.assign($scope, {
        currencyOptions,
        langOptions
    });

    $scope.WithLabel = {
        label: 'Formatted Currency',
        currency: 'EUR',
        lang: 'fr',
        region: 'US',
        get locale() {
            return `${this.lang}-${this.region}`;
        },
        currencyAmount: 77526.8
    };

    $scope.IsZeroNull = {
        label: 'Formatted Currency',
        currency: 'EUR',
        lang: 'fr',
        region: 'US',
        get locale() {
            return `${this.lang}-${this.region}`;
        },
        currencyAmount: null
    };

    $scope.WithoutLabel = {
        label: 'Formatted Currency',
        currency: 'VND',
        lang: 'mr',
        region: 'US',
        get locale() {
            return `${this.lang}-${this.region}`;
        },
        currencyAmount: 322
    };

    $scope.MinMax = {
        label: 'Constrained Currency (0-200)',
        currency: 'USD',
        lang: 'en',
        region: 'US',
        min: 0,
        max: 200,
        get locale() {
            return `${this.lang}-${this.region}`;
        },
        currencyAmount: 322
    };
}

const currencyOptions = {
    AED: 'UAE Dirham',
    AFN: 'Afghan',
    ALL: 'Le',
    AMD: 'Armenian Dram',
    ANG: 'Netherlands Antillean Guilder',
    AOA: 'Kwanza',
    ARS: 'Argentine Peso',
    AUD: 'Australian Dollar',
    AWG: 'Aruban Florin',
    AZN: 'Azerbaijan Manat',
    BAM: 'Convertible Mark',
    BBD: 'Barbados Dolla',
    BDT: 'Taka',
    BGN: 'Bulgarian Lev',
    BHD: 'Bahraini Dinar',
    BIF: 'Burundi Franc',
    BMD: 'Bermudian Dollar',
    BND: 'Brunei Dollar',
    BOB: 'Boliviano',
    BOV: 'Mvdol',
    BRL: 'Brazilian Real',
    BSD: 'Bahamian Dolla',
    BTN: 'Ngultrum',
    BWP: 'Pula',
    BYN: 'Belarusian Ruble',
    BZD: 'Belize Dollar',
    CAD: 'Canadian Dolla',
    CDF: 'Congolese Fran',
    CHE: 'WIR Euro',
    CHF: 'Swiss Fran',
    CHW: 'WIR Franc',
    CLF: 'Unidad de Fomento',
    CLP: 'Chilean Peso',
    CNY: 'Yuan Renminbi',
    COP: 'Colombian Peso',
    COU: 'Unidad de Valor Real',
    CRC: 'Costa Rican Colon',
    CUC: 'Peso Convertible',
    CUP: 'Cuban Peso',
    CVE: 'Cabo Verde Escudo',
    CZK: 'Czech Koruna',
    DJF: 'Djibouti Franc',
    DKK: 'Danish Krone',
    DOP: 'Dominican Peso',
    DZD: 'Algerian Dinar',
    EGP: 'Egyptian Pound',
    ERN: 'Nakfa',
    ETB: 'Ethiopian Birr',
    EUR: 'Euro',
    FJD: 'Fiji Dolla',
    FKP: 'Falkland Islands Pound',
    GBP: 'Pound Sterling',
    GEL: 'Lari',
    GHS: 'Ghana Cedi',
    GIP: 'Gibraltar Poun',
    GMD: 'Dalasi',
    GNF: 'Guinean Franc',
    GTQ: 'Quetza',
    GYD: 'Guyana Dollar',
    HKD: 'Hong Kong Dollar',
    HNL: 'Lempir',
    HRK: 'Kuna',
    HTG: 'Gourde',
    HUF: 'Forint',
    IDR: 'Rupiah',
    ILS: 'New Israeli Sheqel',
    INR: 'Indian Rupee',
    IQD: 'Iraqi Dina',
    IRR: 'Iranian Rial',
    ISK: 'Iceland Krona',
    JMD: 'Jamaican Dolla',
    JOD: 'Jordanian Dina',
    JPY: 'Ye',
    KES: 'Kenyan Shillin',
    KGS: 'So',
    KHR: 'Riel',
    KMF: 'Comorian Franc',
    KPW: 'North Korean Won',
    KRW: 'Wo',
    KWD: 'Kuwaiti Dinar',
    KYD: 'Cayman Islands Dollar',
    KZT: 'Tenge',
    LAK: 'Lao Ki',
    LBP: 'Lebanese Pound',
    LKR: 'Sri Lanka Rupe',
    LRD: 'Liberian Dolla',
    LSL: 'Loti',
    LYD: 'Libyan Dinar',
    MAD: 'Moroccan Dirha',
    MDL: 'Moldovan Leu',
    MGA: 'Malagasy Ariar',
    MKD: 'Denar',
    MMK: 'Kyat',
    MNT: 'Tugrik',
    MOP: 'Pataca',
    MRO: 'Ouguiy',
    MUR: 'Mauritius Rupe',
    MVR: 'Rufiya',
    MWK: 'Malawi Kwacha',
    MXN: 'Mexican Peso',
    MXV: 'Mexican Unidad de Inversion (UDI)',
    MYR: 'Malaysian Ringgit',
    MZN: 'Mozambique Metical',
    NAD: 'Namibia Dollar',
    NGN: 'Naira',
    NIO: 'Cordoba Or',
    NOK: 'Norwegian Kron',
    NPR: 'Nepalese Rupee',
    NZD: 'New Zealand Dollar',
    OMR: 'Rial Omani',
    PAB: 'Balboa',
    PEN: 'So',
    PGK: 'Kina',
    PHP: 'Philippine Pes',
    PKR: 'Pakistan Rupee',
    PLN: 'Zloty',
    PYG: 'Guaran',
    QAR: 'Qatari Ria',
    RON: 'Romanian Leu',
    RSD: 'Serbian Dinar',
    RUB: 'Russian Ruble',
    RWF: 'Rwanda Franc',
    SAR: 'Saudi Riya',
    SBD: 'Solomon Islands Dollar',
    SCR: 'Seychelles Rupee',
    SDG: 'Sudanese Pound',
    SEK: 'Swedish Krona',
    SGD: 'Singapore Dollar',
    SHP: 'Saint Helena Pound',
    SLL: 'Leone',
    SOS: 'Somali Shillin',
    SRD: 'Surinam Dollar',
    SSP: 'South Sudanese Pound',
    STD: 'Dobra',
    SVC: 'El Salvador Colon',
    SYP: 'Syrian Pound',
    SZL: 'Lilangeni',
    THB: 'Baht',
    TJS: 'Somoni',
    TMT: 'Turkmenistan New Manat',
    TND: 'Tunisian Dinar',
    TOP: 'Pa’ang',
    TRY: 'Turkish Lira',
    TTD: 'Trinidad and Tobago Dollar',
    TWD: 'New Taiwan Dollar',
    TZS: 'Tanzanian Shilling',
    UAH: 'Hryvni',
    UGX: 'Uganda Shillin',
    USD: 'US Dollar',
    USN: 'US Dollar (Next day)',
    UYI: 'Uruguay Peso en Unidades Indexadas (URUIURUI)',
    UYU: 'Peso Uruguayo',
    UZS: 'Uzbekistan Sum',
    VEF: 'Bolíva',
    VND: 'Dong',
    VUV: 'Vatu',
    WST: 'Tala',
    XAF: 'CFA Franc BEAC',
    XCD: 'East Caribbean Dollar',
    XDR: 'SDR (Special Drawing Right',
    XOF: 'CFA Franc BCEA',
    XPF: 'CFP Franc',
    XSU: 'Sucre',
    XUA: 'ADB Unit of Accoun',
    YER: 'Yemeni Ria',
    ZAR: 'Rand',
    ZMW: 'Zambian Kwacha',
    ZWL: 'Zimbabwe Dolla'
};

const langOptions = {
    aa: 'Afar',
    ab: 'Abkhaz',
    ae: 'Avestan',
    af: 'Afrikaans',
    ak: 'Akan',
    am: 'Amharic',
    an: 'Aragonese',
    ar: 'Arabic',
    as: 'Assamese',
    av: 'Avaric',
    ay: 'Aymara',
    az: 'Azerbaijani',
    ba: 'Bashkir',
    be: 'Belarusian',
    bg: 'Bulgarian',
    bh: 'Bihari',
    bi: 'Bislama',
    bm: 'Bambara',
    bn: 'Bengali',
    bo: 'Tibetan Standard, Tibetan, Central',
    br: 'Breton',
    bs: 'Bosnian',
    ca: 'Catalan; Valencian',
    ce: 'Chechen',
    ch: 'Chamorro',
    co: 'Corsican',
    cr: 'Cree',
    cs: 'Czech',
    cu: 'Old Church Slavonic, Church Slavic, Church Slavonic, Old',
    cv: 'Chuvash',
    cy: 'Welsh',
    da: 'Danish',
    de: 'German',
    dv: 'Divehi; Dhivehi; Maldivian;',
    dz: 'Dzongkha',
    ee: 'Ewe',
    el: 'Greek, Modern',
    en: 'English',
    eo: 'Esperanto',
    es: 'Spanish; Castilian',
    et: 'Estonian',
    eu: 'Basque',
    fa: 'Persian',
    ff: 'Fula; Fulah; Pulaar; Pular',
    fi: 'Finnish',
    fj: 'Fijian',
    fo: 'Faroese',
    fr: 'French',
    fy: 'Western Frisian',
    ga: 'Irish',
    gd: 'Scottish Gaelic; Gaelic',
    gl: 'Galician',
    gn: 'Guaraní',
    gu: 'Gujarati',
    gv: 'Manx',
    ha: 'Hausa',
    he: 'Hebrew (modern)',
    hi: 'Hindi',
    ho: 'Hiri Motu',
    hr: 'Croatian',
    ht: 'Haitian; Haitian Creole',
    hu: 'Hungarian',
    hy: 'Armenian',
    hz: 'Herero',
    ia: 'Interlingua',
    id: 'Indonesian',
    ie: 'Interlingue',
    ig: 'Igbo',
    ii: 'Nuosu',
    ik: 'Inupiaq',
    io: 'Ido',
    is: 'Icelandic',
    it: 'Italian',
    iu: 'Inuktitut',
    ja: 'Japanese',
    jv: 'Javanese',
    ka: 'Georgian',
    kg: 'Kongo',
    ki: 'Kikuyu, Gikuyu',
    kj: 'Kwanyama, Kuanyama',
    kk: 'Kazakh',
    kl: 'Kalaallisut, Greenlandic',
    km: 'Khmer',
    kn: 'Kannada',
    ko: 'Korean',
    kr: 'Kanuri',
    ks: 'Kashmiri',
    ku: 'Kurdish',
    kv: 'Komi',
    kw: 'Cornish',
    ky: 'Kyrgyz',
    la: 'Latin',
    lb: 'Luxembourgish, Letzeburgesch',
    lg: 'Ganda',
    li: 'Limburgish, Limburgan, Limburger',
    ln: 'Lingala',
    lo: 'Lao',
    lt: 'Lithuanian',
    lu: 'Luba-Katanga',
    lv: 'Latvian',
    mg: 'Malagasy',
    mh: 'Marshallese',
    mi: 'Māori',
    mk: 'Macedonian',
    ml: 'Malayalam',
    mn: 'Mongolian',
    mr: 'Marathi (Marāṭhī)',
    ms: 'Malay',
    mt: 'Maltese',
    my: 'Burmese',
    na: 'Nauru',
    nb: 'Norwegian Bokmål',
    nd: 'North Ndebele',
    ne: 'Nepali',
    ng: 'Ndonga',
    nl: 'Dutch',
    nn: 'Norwegian Nynorsk',
    no: 'Norwegian',
    nr: 'South Ndebele',
    nv: 'Navajo, Navaho',
    ny: 'Chichewa; Chewa; Nyanja',
    oc: 'Occitan',
    oj: 'Ojibwe, Ojibwa',
    om: 'Oromo',
    or: 'Oriya',
    os: 'Ossetian, Ossetic',
    pa: 'Panjabi, Punjabi',
    pi: 'Pāli',
    pl: 'Polish',
    ps: 'Pashto, Pushto',
    pt: 'Portuguese',
    qu: 'Quechua',
    rm: 'Romansh',
    rn: 'Kirundi',
    ro: 'Romanian, Moldavian, Moldovan',
    ru: 'Russian',
    rw: 'Kinyarwanda',
    sa: 'Sanskrit (Saṁskṛta)',
    sc: 'Sardinian',
    sd: 'Sindhi',
    se: 'Northern Sami',
    sg: 'Sango',
    si: 'Sinhala, Sinhalese',
    sk: 'Slovak',
    sl: 'Slovene',
    sm: 'Samoan',
    sn: 'Shona',
    so: 'Somali',
    sq: 'Albanian',
    sr: 'Serbian',
    ss: 'Swati',
    st: 'Southern Sotho',
    su: 'Sundanese',
    sv: 'Swedish',
    sw: 'Swahili',
    ta: 'Tamil',
    te: 'Telugu',
    tg: 'Tajik',
    th: 'Thai',
    ti: 'Tigrinya',
    tk: 'Turkmen',
    tl: 'Tagalog',
    tn: 'Tswana',
    to: 'Tonga (Tonga Islands)',
    tr: 'Turkish',
    ts: 'Tsonga',
    tt: 'Tatar',
    tw: 'Twi',
    ty: 'Tahitian',
    ug: 'Uighur, Uyghur',
    uk: 'Ukrainian',
    ur: 'Urdu',
    uz: 'Uzbek',
    ve: 'Venda',
    vi: 'Vietnamese',
    vk: 'Viking',
    vo: 'Volapük',
    wa: 'Walloon',
    wo: 'Wolof',
    xh: 'Xhosa',
    yi: 'Yiddish',
    yo: 'Yoruba',
    za: 'Zhuang, Chuang',
    zh: 'Chinese',
    zu: 'Zulu'
};