Angular PrimeNG InputNumber组件

Angular PrimeNG是一个开源框架，它有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来做响应式的网站非常容易。在这篇文章中，我们将了解如何在Angular PrimeNG中使用InputNumber组件。我们还将学习属性、事件、方法和造型，以及代码中使用的语法。

InputNumber组件：它允许用户将内容输入为一个数值。

属性:

value : 它是用来给复选框的值。它是数字数据类型，默认值为空。
format :它用于设置是否对数值进行格式化。它是布尔数据类型，默认值为true。
showButtons 。它用于显示旋转器按钮。它的数据类型为布尔型，默认值为false。
buttonLayout :它用于设置按钮的布局，有效值是 “堆叠”（默认）、”水平 “和 “垂直”。它是字符串数据类型，默认值是堆叠的。
incrementButtonClass : 它用于设置增量按钮的风格类别。它是字符串数据类型，默认值为空。
decrementButtonClass : 它用于设置递减按钮的风格类别。它是字符串数据类型，默认值为空。
incrementButtonIcon : 它用于设置增量按钮的风格类别。它是字符串数据类型，默认值是pi pi-chevron-up。
decrementButtonIcon : 它用于设置递减按钮的风格类别。它是字符串数据类型，默认值是pi pi-chevron-down。
locale : 它用于设置格式化中使用的语言环境。它是字符串数据类型，默认值为空。
localeMatcher : 它用于设置要使用的locale匹配算法。它是字符串数据类型，默认值是最佳匹配。
模式 :它用于定义组件的行为，有效值是 “十进制 “和 “货币”。它是字符串数据类型，默认值是十进制。
prefix : 它用于设置在数值前显示的文本。它是字符串数据类型，默认值为空。
后缀 : 它用于设置在数值后面显示的文本。它是字符串数据类型，默认值是小数。
currency : 它用于设置在货币格式化中使用的货币。它是字符串数据类型，默认值为空。
currencyDisplay : 它用于指定如何在货币格式化中显示货币。它是字符串数据类型，默认值是一个符号。
useGrouping : 它用于设置是否使用分组分隔符，如千人分隔符或千/百万/千人分隔符。它是布尔数据类型，默认值为true。
minFractionDigits :它用于设置要使用的最小分数位数。它是数字数据类型，默认值为空。
maxFractionDigits :它用于设置要使用的最大分数位数。它是数字数据类型，默认值为空。
min : 它用于设置最小边界值。它是数字数据类型，默认值为空。
max : 它用于设置最大边界值。它是数字数据类型，默认值为空。
step：用于设置增减值的步长因素。它是数字数据类型，默认值为1。
style : 用于设置组件的内联风格。它是字符串数据类型，默认值为空。
styleClass : 它用于设置组件的风格类别。它是字符串数据类型，默认值为空。
inputId : 它是底层输入元素的ID标识符，是字符串数据类型，默认值为空。
inputStyle : 它用于设置输入字段的内联风格。它是字符串数据类型，默认值为空。
inputStyleClass : 它用于设置输入字段的风格类别。它是字符串数据类型，默认值为空。
占位符:它用于设置输入时显示的咨询信息。它是字符串数据类型，默认值为空。
size : 它用于设置输入字段的大小。它是数字数据类型，默认值为空。
maxlength : 它用于设置输入字段中允许的最大字符数。它是数字数据类型，默认值为空。
tabindex : 它用于设置元素的指定标签顺序。它是数字数据类型，默认值为空。
disabled : 它指定该元素应该被禁用。它是布尔数据类型，默认值是false。
title : 它用于设置输入文本的标题文本。它是字符串数据类型，默认值为空。
ariaLabel : 它用于定义一个标签输入元素的字符串。它是字符串数据类型，默认值为空。
ariaRequired : 它用于表明在提交表单之前需要用户输入一个元素。它是布尔数据类型，默认值是false。
name : 它用于设置输入字段的名称。它是字符串数据类型，默认值为空。
autocomplete : 它用于定义一个字符串，自动完成当前元素的属性。它是字符串数据类型，默认值为空。

方法:

getFormatter:该方法返回Intl.NumberFormat对象。

事件:

onFocus: 它是一个回调，当输入收到焦点时被触发。
onBlur : 它是一个回调，当输入失去焦点时被触发。
onInput : 它是一个回调，当输入值时被触发。
event.value : 它是一个回调，当值被输入时被触发。

样式:

p-inputnumber: 它是容器元素。
p-inputnumber-stacked。它是带有叠加按钮的容器元素。
p-inputnumber-horizontal: 它是带有水平按钮的容器元素。
p-inputnumber-vertical: 它是带有垂直按钮的容器元素。
p-inputnumber-input。它是输入元素。
p-inputnumber-button。它是输入元素。
p-inputnumber-button-up。它是增量按钮。
p-inputnumber-button-down。它是递减按钮。
p-inputnumber-button-icon。它是按钮的图标。

创建Angular应用程序和模块安装。

第1步：使用以下命令创建一个Angular应用程序。

ng new appname

第2步：在创建你的项目文件夹即appname后，使用以下命令移动到它。

cd appname

第3步：在你给定的目录中安装PrimeNG。

npm install primeng --save
npm install primeicons --save

项目结构。它将看起来像以下。

Angular PrimeNG InputNumber组件

例子1：这是一个基本的例子，说明了如何使用InputNumber组件。

<h2>GeeksforGeeks</h2>
<h5>PrimeNG inputNumber component</h5>
<div class="p-grid p-fluid">
  <div class="p-field p-col-12 p-md-3">
    <p-inputNumber placeholder="Input number here">
    </p-inputNumber>
  </div>
</div>

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
  
import { InputNumberModule } from "primeng/inputnumber";
  
@NgModule({
  imports: [BrowserModule, InputNumberModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

import { Component } from "@angular/core";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
})
export class AppComponent {}

输出:

Angular PrimeNG InputNumber组件

例子2：在这个例子中，我们将知道如何在InputNumber组件中使用prefix & suffix属性。

<h2>GeeksforGeeks</h2>
<h5>PrimeNG inputNumber component</h5>
<div class="p-field p-col-12 p-md-3">
  <label for="gfg">Prefix and Suffix Property</label>
  <p-inputNumber inputId="gfg" suffix=")" 
                 prefix="(" placeholder="()">
  </p-inputNumber>
</div>

import { NgModule } from "@angular/core";
import { BrowserModule } from "@angular/platform-browser";
import { AppComponent } from "./app.component";
  
import { InputNumberModule } from "primeng/inputnumber";
  
@NgModule({
  imports: [BrowserModule, InputNumberModule],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})
export class AppModule {}

import { Component } from "@angular/core";
  
@Component({
  selector: "my-app",
  templateUrl: "./app.component.html",
})
export class AppComponent {}

输出:

Angular PrimeNG InputNumber组件