InputNumber KIT
See also
InputSlider, InputRange, Range, Slider, MoneyForm control value
# Form control value is of null (for empty textfield only) and number (all other cases) types.
null (for empty textfield only) and number (all other cases) types. Use Validators.required (built-in validator provided by Angular team) with our FieldError pipe to notify your users about required field.
Control value:
nullTextfield-based
#Use all powers of Textfield : put any number of Icons and Tooltips inside (and control their order and color), modify the size of the textbox and etc. Explore its documentation page for more customization options.
Localization
#TuiNumberFormat allows to customize separators specific for your locale.
Affixes
# Use prefix / postfix parameters to set non-removable text before / after the number.
To get currency symbol use Currency pipe.
Step
# Positive value of step property enables sided button to increase / decrease the number by the specified step's value. Moreover, keyboard keys ArrowUp / ArrowDown will also work in the same way.
Custom step buttons
#Fluid typography
#Use FluidTypography directive to adjusts font size for the textfield value to fit in the textfield box.
Value transformer
#TuiValueTransformer is a great opportunity to override default form control's value format without breaking component's internal logic.
This example demonstrates how to use NaN -value for empty textfield instead of default null -value to keep type strictly "number" .
Control value: NaN
Quantum
# Property [quantum] allows to set minimum indivisible value. Form control value never contains a number that is not divisible by value of this property. Even if user enters any invalid number, it will be rounded to the nearest valid one on blur event.
In this example, form control value can only contain 0 , 0.05 , 0.1 , 0.15 ... 0.9 , 0.95 , 1 .
Control value:
0.5
Taiga UI