极客教程Angular PrimeNG Form InputNumber Buttons组件
Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可用于出色的造型，这个框架用于制作响应式网站，非常容易。在这篇文章中，我们将学习如何在Angular PrimeNG中使用Form InputNumber Buttons组件。我们还将学习属性，以及代码中要用到的语法。
InputNumber组件允许用户将内容输入为一个数值。可以使用showButtons属性激活旋转按钮，buttonLayout控制布局。“堆叠”是默认值。其他两个是“水平”和“堆叠”。即使没有按钮，键盘上的上和下方向键也可以用来旋转数值。
语法:
<p-inputNumber
placeholder="..."
[showButtons]="..."
buttonLayout="...">
</p-inputNumber>
Angular PrimeNG Form InputNumber Buttons 组件属性：
- step。用来设置增减值的步长因素。它是数字数据类型，默认值为1。
- placeholder。它用于设置输入时显示的咨询信息。它是字符串数据类型，默认值为空。
- showButtons。它用于显示旋转器按钮。它是布尔数据类型，默认值是false。
- buttonLayout。用于设置按钮的布局，有效值为 “堆叠”（默认）、”水平 “和 “垂直”。它是字符串数据类型，默认值是堆叠的。
- value。它用于给出复选框的值。它是数字数据类型，默认值为空。
- format。它用于设置是否对数值进行格式化。它是布尔数据类型，默认值为true。
- incrementButtonClass。它用于设置增量按钮的风格类别。它是字符串数据类型，默认值为空。
- decrementButtonClass。它用于设置递减按钮的风格类别。它是字符串数据类型，默认值为空。
- incrementButtonIcon: 它用于设置增量按钮的风格类别。它是字符串数据类型，默认值是pi pi-chevron-up。
- decrementButtonIcon: 它用于设置递减按钮的风格类别。它是字符串数据类型，默认值是pi pi-chevron-down。
- locale。它用于设置格式化时使用的语言环境。它是字符串数据类型，默认值为空。
- localeMatcher: 它用于设置要使用的locale匹配算法。它是字符串数据类型，默认值是最佳匹配。
- mode。它用于定义组件的行为，有效值是 “十进制 “和 “货币”。它是字符串数据类型，默认值是小数。
- prefix。它用于设置在数值前显示的文本。它是字符串数据类型，默认值为空。
- suffix。它用于设置在数值后面显示的文本。它是字符串数据类型，默认值是小数。
- currency。它用于设置货币格式化中使用的货币。它是字符串数据类型，默认值为空。
- currencyDisplay。它用于指定如何在货币格式中显示货币。它是字符串数据类型，默认值是一个符号。
- useGrouping:它用于设置是否使用分组分隔符，如千人分隔符或千/百万/千人分隔符。它是布尔数据类型，默认值为true。
- minFractionDigits:它用于设置要使用的最小分数位数。它是数字数据类型，默认值为空。
- maxFractionDigits:它用于设置要使用的最大分数位数。它是数字数据类型，默认值为空。
- min: 它用于设置最小边界值。它是数字数据类型，默认值为空。
- max:它用于设置最大边界值。它是数字数据类型，默认值为空。
- step。用来设置增减值的步长因素。它是数字数据类型，默认值为1。
- style。它用于设置组件的内联风格。它是字符串数据类型，默认值为空。
- styleClass。它用于设置组件的风格类。它是字符串数据类型，默认值为空。
- inputId。它是底层输入元素的ID标识符，属于字符串数据类型，默认值为空。
- inputStyle。它用于设置输入字段的内嵌样式。它是字符串数据类型，默认值为空。
- inputStyleClass。它用于设置输入字段的风格类别。它是字符串数据类型，默认值为空。
- placeholder。它用于设置输入时显示的咨询信息。它是字符串数据类型，默认值为空。
- size。它用于设置输入字段的大小。它是数字数据类型，默认值为空。
- maxlength。它用于设置输入字段中允许的最大字符数。它是数字数据类型，默认值为空。
- tabindex。它用于设置元素的指定标签顺序。它是数字数据类型，默认值为空。
- disabled: 它指定该元素应该被禁用。它是布尔数据类型，默认值是false。
- header。用来设置输入文本的标题文本。它是字符串数据类型，默认值为空。
- ariaLabel。它用于定义一个给输入元素贴标签的字符串。它是字符串数据类型，默认值为空。
- ariaRequired。它用于表明在提交表单之前需要用户输入某个元素。它是布尔数据类型，默认值是false。
- name: 它用于设置输入字段的名称。它是字符串数据类型，默认值为空。
- autocomplete。它用于定义一个字符串，对当前元素的属性进行自动完成。它是字符串数据类型，默认值为空。
创建Angular应用程序和模块安装。
第1步：使用以下命令创建一个Angular应用程序。
ng new appname
第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。
cd appname
第3步：在你给定的目录中安装PrimeNG。
npm install primeng --save
npm install primeicons --save
Project Structure:
运行应用程序的步骤：运行以下命令以查看输出。
ng serve --save
示例1：在下面的代码中，我们将看到Angular PrimeNG Form InputNumber Buttons Component使用buttonLayout=”horizontal”的演示。
- app.component.html:
<h1 style="color: green">GeeksforGeeks</h1>
<h5>
Angular PrimeNG Form InputNumber
Buttons Component
</h5>
<p-inputNumber
placeholder="Input any number"
[showButtons]="true"
buttonLayout="horizontal">
</p-inputNumber>
- app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent { }
- app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import {InputNumberModule} from 'primeng/inputnumber';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
InputNumberModule,
FormsModule
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
输出:
例子2：下面是另一个代码例子，演示了Angular PrimeNG Form InputNumber Buttons Component使用buttonLayout=”vertical”的情况。
- app.component.html:
<h1 style="color: green">GeeksforGeeks</h1>
<h5>
Angular PrimeNG Form InputNumber
Buttons Component
</h5>
<p-inputNumber
placeholder="Input any number"
[showButtons]="true"
buttonLayout="vertical">
</p-inputNumber>
- app.component.ts:
import { Component } from '@angular/core';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent { }
- app.module.ts:
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import {FormsModule} from '@angular/forms';
import { BrowserAnimationsModule }
from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import {InputNumberModule} from 'primeng/inputnumber';
@NgModule({
imports: [
BrowserModule,
BrowserAnimationsModule,
InputNumberModule,
FormsModule
],
declarations: [ AppComponent ],
bootstrap: [ AppComponent ]
})
export class AppModule { }
输出:
