Angular PrimeNG Form 输入数字事件组件

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

Form InputNumber组件用于从用户那里获取数字输入。InputNumber组件可以使用Angular本身提供的ngModel指令绑定到一个数字变量。

Angular PrimeNG Form InputNumber Events：

• onFocus。这个事件需要一个回调函数，当输入成为焦点时被调用。
• onBlur: 这个事件需要一个回调函数，当输入失去焦点时被调用。
• onInput。当输入值被输入时，这个回调被触发。
• onClear：当输入被清除时，该回调被触发。

语法:

<p-inputNumber 
    [(ngModel)]="..."
     (event-name)="callback()">
</p-inputNumber>

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

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

ng new newapp

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

cd newapp

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

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

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

例子1：在这个例子中，我们使用InputNumber组件的onFocus和onBlur事件来显示一条祝酒词。

• app.component.html

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

• app.component.ts

import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';
 
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [MessageService]
})
export class AppComponent {
    numValue?: number;
    constructor(private messageservice: MessageService) { }
 
    handleInputFocus(event: any) {
        this.messageservice.add({
            severity: 'success',
            summary: 'Input Focused',
            detail: 'onFocus event triggered'
        })
    }
 
    handleInputBlur(event: any) {
        this.messageservice.add({
            severity: 'error',
            summary: 'Input Lost Focused',
            detail: 'onBlur event triggered'
        })
    }
}

• 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';
import { ToastModule } from 'primeng/toast';
 
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        InputNumberModule,
        FormsModule,
        ToastModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
 
export class AppModule { }

输出:

例2：在这个例子中，我们使用InputNumber组件的onInput和onClear事件，在输入任何数值和清除输入时显示祝酒词。

• app.component.html

<div>
    <h1 style="color:green;">GeeksforGeeks</h1>
    <h3>A computer science portal for geeks</h3>
    <h4>Angular PrimeNG Form InputNumber
        Events Component
    </h4>
 
    <h3>
        Shows a toast message when anything <br>
        is input or cleared from the InputNumber
    </h3>
    <p-inputNumber
        [(ngModel)]="numValue"
        [showClear]="true"
        (onInput)="handleOnInput(event)"
        (onClear)="handleOnClear(event)">
    </p-inputNumber>
 
    <p-toast></p-toast>
</div>

• app.component.ts

import { Component } from '@angular/core';
import { MessageService } from 'primeng/api';
 
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
    providers: [MessageService]
})
export class AppComponent {
    numValue?: number;
    constructor(private messageservice: MessageService) { }
 
    handleOnInput(event: any) {
        this.messageservice.add({
            severity: 'success',
            summary: 'Value Enetered',
            detail:event.value
        })
    }
 
    handleOnClear($event: any) {
        this.messageservice.add({
            severity: 'error',
            summary: 'Value Cleared',
            detail: 'onClear event triggered'
        })
    }
}

• 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';
import { ToastModule } from 'primeng/toast';
 
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        InputNumberModule,
        FormsModule,
        ToastModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent]
})
 
export class AppModule { }

输出: