极客教程Angular PrimeNG Form InputNumber组件
Angular PrimeNG是一个开源框架，拥有丰富的原生Angular UI组件，可以用来做很好的造型，这个框架用来制作响应式网站非常方便。在这篇文章中，我们将了解如何在Angular PrimeNG中使用InputNumber组件。我们还将学习属性、事件、方法和造型，以及代码中使用的语法。
InputNumber组件允许用户将内容输入为一个数值。
Angular PrimeNG Form InputNumber组件属性：
- value。它用于给出复选框的值。它是数字数据类型，默认值为空。
- format。它用于设置是否对数值进行格式化。它是一个布尔数据类型，默认值为true。
- showButtons。它用于显示旋转器按钮。它是布尔数据类型，默认值是false。
- buttonLayout。用于设置按钮的布局，有效值为 “堆叠”（默认）、”水平 “和 “垂直”。它是字符串数据类型，默认值是堆叠的。
- 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。它用于定义一个字符串，对当前元素的属性进行自动完成。它是字符串数据类型，默认值为空。
- showClear：用于显示一个清除图标以清除数值。
创建Angular应用程序和模块安装。
第1步：使用以下命令创建一个Angular应用程序。
ng new appname
第2步：创建你的项目文件夹即appname后，使用以下命令移动到它。
cd appname
第3步：在你给定的目录中安装PrimeNG。
npm install primeng --save
npm install primeicons --save
Project Structure:
例子1：在下面的代码中，我们将看到表单InputNumber组件的演示。
- app.component.html
<div style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
A computer science portal for geeks
</h3>
<h4>
Angular PrimeNG Form InputNumber Component
</h4>
<div class="p-grid p-fluid">
<div class="p-field p-col-12 p-md-3">
<label for="integeronly">
Only Integers
</label>
<p-inputNumber
inputId="integeronly"
[(ngModel)]="value1"
name="integeronly">
</p-inputNumber>
</div>
</div>
</div>
- app.component.ts
import { Component } from '@angular/core';
import { MenuItem } from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
value1: number = 97;
value2: number = 9786;
}
- app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
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：在下面的代码中，我们将看到表单InputNumber组件的演示。
- app.component.html
<div style="text-align:center;">
<h1 style="color:green;">
GeeksforGeeks
</h1>
<h3>
A computer science portal for geeks
</h3>
<h4>
Angular PrimeNG Form InputNumber Component
</h4>
<div class="p-grid p-fluid">
<div class="p-field p-col-12 p-md-3">
<label for="integeronly">
Only Integers
</label>
<p-inputNumber
inputId="integeronly"
[(ngModel)]="value1"
name="integeronly"
disabled="true">
</p-inputNumber>
</div>
</div>
</div>
- app.component.ts
import { Component } from '@angular/core';
import { MenuItem } from 'primeng/api';
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
value1: number = 97;
value2: number = 9786;
}
- app.module.ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { FormsModule } from '@angular/forms';
import { HttpClientModule } from '@angular/common/http';
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 { }
输出:
