jQWidgets
  • Docs
  • License and Pricing
  • Services
  • Community
    • Forums
    • Blogs
    • Follow Us
    • Client Login
  • About
    • About Us
    • Contact Us
    • FAQ
  • Products
    • Angular
    • React
    • Vue
    • jQuery
    • Web Components
    • Blazor
    • Svelte
    • Templates
  • Download
Angular UI Components
  • Javascript/jQuery
  • Angular
  • Vue
  • React
  • Web Components
  • Blazor
  • Templates
  • Theme Builder
  • Artavolo
Show Demo List

Angular UI Components (Angular 16–22 supported)

Data Grids and Tables

  • jqxGrid
  • jqxPivotGrid
  • jqxTreeGrid
  • jqxDataTable

Charts and Visualization

  • jqxChart
  • jqxGauge
  • jqxBarGauge
  • jqxBulletChart
  • jqxHeatMap
  • jqxTreeMap
  • jqxRangeSelector
  • jqxBarcode New
  • jqxQRcode New
  • jqxDraw

Scheduling and Planning

  • jqxScheduler
  • jqxGantt
  • jqxKanban
  • jqxTimeline

AI and Collaboration

  • jqxChat New

Editors and Inputs

  • jqxEditor
  • jqxForm
  • jqxDateTimeInput
  • jqxCalendar
  • jqxTimePicker
  • jqxInput
  • jqxNumberInput
  • jqxMaskedInput
  • jqxFormattedInput
  • jqxComplexInput
  • jqxPasswordInput
  • jqxTextArea
  • jqxColorPicker
  • jqxSlider
  • jqxKnob
  • jqxRating
  • jqxButtons
  • jqxCheckBoxGroup New
  • jqxFileUpload
  • jqxValidator
  • jqxValidator

Lists and Selection

  • jqxDropDownList
  • jqxComboBox
  • jqxListBox
  • jqxTree
  • jqxPickList New

Navigation and Menus

  • jqxTabs
  • jqxMenu
  • jqxToolBar
  • jqxRibbon
  • jqxNavigationBar
  • jqxNavBar
  • jqxListMenu

Layout and Containers

  • jqxSplitter
  • jqxLayout
  • jqxDockingLayout
  • jqxDocking
  • jqxSplitLayout
  • jqxPanel
  • jqxExpander
  • jqxResponsivePanel
  • jqxScrollView
  • jqxScrollBar

Popups and Feedback

  • jqxWindow
  • jqxNotification
  • jqxTooltip
  • jqxPopOver
  • jqxLoader
  • jqxProgressBar

Data and Utilities

  • jqxDragDrop
  • jqxSortable

jqxFormattedInput

  • Default Functionality
  • Simple Input
  • Validation
  • Negative Numbers
  • Upper Case Hexadecimals
  • Exponential Notation
  • Fluid Size
  • Events
  • Keyboard Navigation
  • Right to Left Layout
  • Two-way Data Binding
Theme:
  • Demo
  • App.htm
  • app.ts
  • app.html
  • main.ts
  • API Reference

Angular Formatted Input UI Component

The FormattedInput component for Angular enables changing the numeric system of the displayed number by choosing an option from the dropdown. The component can be initialized from an HTML input and provides validation. When the user enters a number whose decimal equivalent is not from 0 to 1000, the FormattedInput updates the number to the chosen numeral system's equivalent of 0 or 1000 depending on whether the number's decimal equivalent is below 0 or above 1000.

angular formattedinput

About jqxFormattedInput for Angular

jqxFormattedInput is the jQWidgets FormattedInput component for Angular. Numeric input for binary, octal, decimal and hexadecimal values.

11 jqxFormattedInput demos with source code

  • Default Functionality
  • Simple Input
  • Validation
  • Negative Numbers
  • Upper Case Hexadecimals
  • Exponential Notation
  • Fluid Size
  • Events – The events that occur in Angular FormattedInput.
  • Keyboard Navigation
  • Right to Left Layout – Angular FormattedInput RightToLeft.
  • Two-way Data Binding

jqxFormattedInput API

jqxFormattedInput has 19 properties, 4 events and 8 methods, all in the API reference. Its main members, those its demos use first:

  • radix (property) – Sets or gets the radix of the jqxFormattedInput.
  • value (property) – Sets or gets the value of the jqxFormattedInput widget.
  • dropDown (property) – Sets or gets whether the jqxFormattedInput's dropdown (pop-up) will be enabled.
  • spinButtons (property) – Shows or hides the spin buttons.
  • val (method) – Sets or gets the value.
  • min (property) – Sets or gets the minimum value of the widget.
  • max (property) – Sets or gets the maximum value of the widget.
  • upperCase (property) – Sets or gets whether to use upper case when the radix property is set to 16 or 'hexadecimal'.
  • decimalNotation (property) – Sets or gets the notation in which to display decimal numbers.
  • change (event) – This event is triggered when the value is changed.

Learn more

  • Getting started
  • API reference
  • JavaScript version
jQWidgets
  • Facebook
  • X (Twitter)
  • Demo
  • Download
  • Documentation
  • License and Pricing
  • Services
  • Products
  • Angular UI Components
  • React UI Components
  • Vue UI Components
  • Blazor UI Components
  • jQuery UI Components
  • Javascript UI Components
  • Svelte Data Grid (SvGrid)
  • Forums
  • About
  • Terms of Use
  • Privacy Policy
  • Contact Us

jQWidgets © 2011-2026. All Rights Reserved.