Angular PrimeNG InputNumber 组件

Angular PrimeNG 是一个开源框架，具有丰富的原生 Angular UI 组件集，可用于出色的样式，并且该框架用于非常轻松地制作响应式网站。在本文中，我们将了解如何在 Angular PrimeNG 中使用 InputNumber 组件。我们还将了解将在代码中使用的属性、事件、方法和样式以及它们的语法。

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

特性：

• value ：用于给出复选框的值。它是数字数据类型，默认值为空。
• format ：用于设置是否格式化值。它是布尔数据类型，默认值为true。
• showButtons ：用于显示微调按钮。它是布尔数据类型，默认值为false。
• buttonLayout ：用于设置按钮的布局，有效值为“stacked”（默认）、“horizontal”和“vertical”。它是字符串数据类型，默认值是堆叠的。
• incrementButtonClass ：用于设置增量按钮的样式类。它是字符串数据类型，默认值为空。
• decrementButtonClass ：用于设置递减按钮的样式类。它是字符串数据类型，默认值为空。
• incrementButtonIcon ：用于设置增量按钮的样式类。它是字符串数据类型，默认值为 pi pi-chevron-up。
• decrementButtonIcon ：用于设置递减按钮的样式类。它是字符串数据类型，默认值为 pi pi-chevron-down。
• locale ：用于设置格式化时使用的语言环境。它是字符串数据类型，默认值为空。
• localeMatcher ：用于设置要使用的语言环境匹配算法。它是字符串数据类型，默认值是最合适的。
• mode ：用于定义组件的行为，有效值为“十进制”和“货币”。它是字符串数据类型，默认值为十进制。
• prefix ：用于设置要在值之前显示的文本。它是字符串数据类型，默认值为空。
• suffix ：用于设置值后显示的文本。它是字符串数据类型，默认值为十进制。
• 货币：用于设置货币格式中使用的货币。它是字符串数据类型，默认值为空。
• currencyDisplay ：用于指定如何以货币格式显示货币。它是字符串数据类型，默认值为符号。
• useGrouping ：用于设置是否使用分组分隔符，例如千位分隔符或千/十万/千万分隔符。它是布尔数据类型，默认值为true。
• minFractionDigits ：用于设置要使用的最小小数位数。它是数字数据类型，默认值为空。
• maxFractionDigits ：用于设置要使用的最大小数位数。它是数字数据类型，默认值为空。
• min ：用于设置最小边界值。它是数字数据类型，默认值为空。
• max ：用于设置最大边界值。它是数字数据类型，默认值为空。
• step ：用于设置步进因子以增加/减少值。它是数字数据类型，默认值为 1。
• style ：用于设置组件的内联样式。它是字符串数据类型，默认值为空。
• styleClass ：用于设置组件的样式类。它是字符串数据类型，默认值为空。
• inputId : 底层输入元素的ID标识，字符串数据类型，默认为null。
• inputStyle ：用于设置输入字段的内联样式。它是字符串数据类型，默认值为空。
• inputStyleClass ：用于设置输入字段的样式类。它是字符串数据类型，默认值为空。
• placeholder ：用于设置在输入时显示的咨询信息。它是字符串数据类型，默认值为空。
• size ：用于设置输入字段的大小。它是数字数据类型，默认值为空。
• maxlength ：用于设置输入字段中允许的最大字符数。它是数字数据类型，默认值为空。
• tabindex ：用于设置元素的指定tab顺序。它是数字数据类型，默认值为空。
• 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

项目结构：它将如下所示：

示例 1：这是说明如何使用 InputNumber 组件的基本示例。  

app.component.html

GeeksforGeeks
PrimeNG inputNumber component

  

    
    
  

app.module.ts

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 {}

app.component.ts

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

输出：

示例 2：在本示例中，我们将了解如何在 InputNumber 组件中使用前缀和后缀属性。

app.component.html

GeeksforGeeks
PrimeNG inputNumber component

  Prefix and Suffix Property
  
  

app.module.ts

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 {}

app.component.ts

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

输出：

参考： https://primefaces.org/primeng/showcase/#/inputnumber