Angular PrimeNG Form InputNumber造型组件

Angular PrimeNG是一个用于angular应用程序的UI组件目录。它由一系列的UI组件组成，有助于制作快速和可扩展的网站。本文将看到**Angular PrimeNG表单输入数字造型组件。

表格InputNumber组件用于从用户那里获取数字输入。InputNumber组件的自定义样式可以使用下面列出的结构样式类来完成。

Angular PrimeNG Form InputNumber Styling Classes：

• 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。该类应用于按钮的图标。

语法:

// File: app.component.html
<p-inputNumber [(ngModel)]="..."></p-inputNumber>

// File: app.component.css
:host ::ng-deep .Styling-Class{
    // CSS Properties
}

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

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

ng new newapp

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

cd newapp

第3步：在你的项目目录中安装PrimeNG和PrimeIcons。

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

项目结构：完成安装后，项目结构将如下所示。

Project Structure

例子1：在这个例子中，我们使用p-inputnumber和p-inputnumber-input造型__类，将输入的边框颜色和文本颜色设置为绿色。

• app.component.html:

<div>
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>
        Angular PrimeNG Form 
        InputNumber Styling Component
    </h4>
  
    <p-inputNumber 
        [(ngModel)]="numValue">
    </p-inputNumber>
</div>

• app.component.css:

:host ::ng-deep .p-inputnumber {
    border: 2px solid green;
}
  
:host ::ng-deep .p-inputnumber 
    .p-inputnumber-input:enabled:focus,
:host ::ng-deep .p-inputnumber 
    .p-inputnumber-input{
    box-shadow: none;
    color: green;
}

• app.component.ts:

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    numValue?: number;
}

• 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：在这个例子中，我们使用p-inputnumber-button-up和p-inputnumber-button-down类来改变增量和减量按钮的样式。

• app.component.html:

<div>
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>
        Angular PrimeNG Form 
        InputNumber Styling Component
    </h4>
  
    <p-inputNumber 
        [showButtons]="true" 
        buttonLayout="horizontal"
        [(ngModel)]="numValue">
    </p-inputNumber>
</div>

• app.component.css:

:host ::ng-deep .p-inputnumber-button-up , 
:host ::ng-deep .p-inputnumber-button-down{
    border-radius: 50%;
    border: none;
    margin: 0 10px;
    background-color: coral;
}

• app.component.ts:

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css']
})
export class AppComponent {
    numValue?: number;
}

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

输出: