Числовой инпут

PrimeNG/InputNumber (opens in a new tab)

Инпут для ввода чисел.

С чего начать

Подключите модуль

import { InputNumberModule } from 'primeng/inputnumber';

В .ts файле

import { Component, OnInit } from '@angular/core';
 
@Component({
  selector: 'app-prime-inputnumber',
  templateUrl: './prime-inputnumber.component.html',
  styleUrls: ['./prime-inputnumber.component.scss']
})
export class PrimeInputnumberComponent implements OnInit {
 
  constructor() { }
 
  value1: number = 42723;
  value2: number = 58151;
  value3: number = 2351.35;
  value4: number = 50;
  value5: number = 151351;
  value6: number = 115744;
  value7: number = 635524;
  value8: number = 732762;
  value9: number = 1500;
  value10: number = 2500;
  value11: number = 4250;
  value12: number = 5002;
  value13: number = 20;
  value14: number = 50;
  value15: number = 10;
  value16: number = 20;
  value17: number = 20;
  value18: number = 10.50;
  value19: number = 25;
  value20: number = 50;
 
  valueXs = 1000;
  valueSm = 3000;
  valueDe = 5000;
  valueLg = 7000;
  ngOnInit(): void {
  }
}

Встройте компонент с помощью тэга p-inputNumber.

<p-inputNumber inputId="integeronly" [(ngModel)]="value1"></p-inputNumber>

Numerals

Integer OnlyWithout GroupingMin-Max Fraction DigitsMin-Max BoundariesUser LocaleUnited States LocaleGerman LocaleIndian Locale

Numerals

Integer Only

Without Grouping

Min-Max Fraction Digits

Min-Max Boundaries

User Locale

United States Locale

German Locale

Indian Locale

Currency

United StatesGermanyIndiaJapan

United States

Germany

India

Japan

Prefix and Suffix

Mile

Percent

Expiry

Temperature

Buttons

StackedHorizontal with StepMin-Max Boundaries

Stacked

Horizontal with Step

Min-Max Boundaries

Vertical

Readonly

Для включения свойства readonly передайте свойство в компонент таким образом: [readonly]="true". Поле будет активно, но вписать в него текст не получится.Float Label

InputNumber

Float Label

InputNumber

Размеры

Extra smallSmallDefaultLarge

Свойства

Name	Type	Default	Description
value	number	null	Value of the component.
format	boolean	true	Whether to format the value.
showButtons	boolean	false	Displays spinner buttons.
buttonLayout	string	stacked	Layout of the buttons, valid values are "stacked" (default), "horizontal" and "vertical".
incrementButtonClass	string	null	Style class of the increment button.
decrementButtonClass	string	null	Style class of the decrement button.
incrementButtonIcon	string	pi pi-chevron-up	Style class of the increment button.
decrementButtonIcon	string	pi pi-chevron-down	Style class of the decrement button.
locale	string	null	Locale to be used in formatting.
localeMatcher	string	best fit	The locale matching algorithm to use. Possible values are "lookup" and "best fit"; the default is "best fit". See <a href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl#Locale_negotiation">Locale (opens in a new tab) Negotation</a> for details.
mode	string	decimal	Defines the behavior of the component, valid values are "decimal" and "currency".
prefix	string	null	Text to display before the value.
suffix	string	decimal	Text to display after the value.
currency	string	null	The currency to use in currency formatting. Possible values are the <a href="https://www.currency-iso.org/en/home/tables/table-a1.html">ISO (opens in a new tab) 4217 currency codes</a>, such as "USD" for the US dollar, "EUR" for the euro, or "CNY" for the Chinese RMB. There is no default value; if the style is "currency", the currency property must be provided.
currencyDisplay	string	symbol	How to display the currency in currency formatting. Possible values are "symbol" to use a localized currency symbol such as €, ü"code" to use the ISO currency code, "name" to use a localized currency name such as "dollar"; the default is "symbol".
useGrouping	boolean	true	Whether to use grouping separators, such as thousands separators or thousand/lakh/crore separators.
minFractionDigits	number	null	The minimum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number and percent formatting is 0; the default for currency formatting is the number of minor unit digits provided by the <a href="https://www.currency-iso.org/en/home/tables/table-a1.html">ISO (opens in a new tab) 4217 currency code list</a> (2 if the list doesn't provide that information).
maxFractionDigits	number	null	The maximum number of fraction digits to use. Possible values are from 0 to 20; the default for plain number formatting is the larger of minimumFractionDigits and 3; the default for currency formatting is the larger of minimumFractionDigits and the number of minor unit digits provided by the <a href="https://www.currency-iso.org/en/home/tables/table-a1.html">ISO (opens in a new tab) 4217 currency code list</a> (2 if the list doesn't provide that information).
min	number	null	Mininum boundary value.
max	number	null	Maximum boundary value.
step	number	1	Step factor to increment/decrement the value.
allowEmpty	boolean	true	Determines whether the input field is empty.
style	string	null	Inline style of the component.
styleClass	string	null	Style class of the component.
inputId	string	null	Identifier of the focus input to match a label defined for the component.
inputStyle	string	null	Inline style of the input field.
inputStyleClass	string	null	Style class of the input field.
placeholder	string	null	Advisory information to display on input.
size	number	null	Size of the input field.
maxlength	number	null	Maximum number of character allows in the input field.
tabindex	number	null	Specifies tab order of the element.
disabled	boolean	false	When present, it specifies that the element should be disabled.
readonly	boolean	false	When present, it specifies that an input field is read-only.
title	string	null	Title text of the input text.
ariaLabel	string	null	Used to define a string that labels the input element.
ariaRequired	boolean	false	Used to indicate that user input is required on an element before a form can be submitted.
name	string	null	Name of the input field.
autocomplete	string	null	Used to define a string that autocomplete attribute the current element.

События

Name	Parameters	Description
onFocus	event: Browser event	Callback to invoke when input receives focus.
onBlur	event: Browser event	Callback to invoke when input loses focus.
onInput	event.originalEvent: Browser event<br>event.value: New value	Callback to invoke when the value is entered.

Методы

Name	Parameters	Description
getFormatter	-	Returns Intl.NumberFormat object.

Стилизация

Name	Element
p-inputnumber	Container element
p-inputnumber-stacked	Container element with stacked buttons.
p-inputnumber-horizontal	Container element with horizontal buttons.
p-inputnumber-vertical	Container element with vertical buttons.
p-inputnumber-input	Input element
p-inputnumber-button	Input element
p-inputnumber-button-up	Increment button
p-inputnumber-button-down	Decrement button
p-inputnumber-button-icon	Button icon

InputMask InputSwitch