Angular PrimeNG表单旋钮事件组件

Angular PrimeNG是一个为Angular应用程序制作的UI组件集合。它使开发者无需投入太多的时间就能轻松地建立起漂亮而高效的Web界面。在这篇文章中，我们将看到Angular PrimeNG表单旋钮事件组件。

旋钮组件是用来用一个转盘接受用户的数字输入。旋钮的值可以被定义在app.component.ts _文件中的一个数字变量所约束。旋钮组件只有一个名为_onChange的事件，如下所示。

Angular PrimeNG Form Knob事件：

onChange。一个回调函数可以被传递给这个事件。只要旋钮的值发生变化，这个回调函数就会被调用。

Angular PrimeNG Form Knob属性：。

step。此属性用于设置旋钮的阶梯增量/减量。默认值为1。
min: 此属性用于设置旋钮的最小值。
max:此属性用于设置旋钮的最大值。

语法:

<p-knob 
    (onChange)="callback($event)"
    [(ngModel)]="...">
</p-knob>

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

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

ng new myapp

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

cd myapp

第3步：在你给定的目录中安装PrimeNG。

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

项目结构：完成上述步骤后，其结构将如下所示。

Angular PrimeNG表单旋钮事件组件

Project Structure

例子1：在这个例子中，我们使用onChange事件，在旋钮的值发生变化时向用户显示一条信息。

app.component.html

<h2 style="color: green">
    GeeksforGeeks
</h2>
<h3>
    Angular PrimeNG Form
    Knob Events Component
</h3>
  
<p-knob 
    [step]="10"
    (onChange)="knobOnChange($event)"
    [(ngModel)]="knobValue1">
</p-knob>
<p-toast></p-toast>

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 {
    constructor(private msg: MessageService){}
    knobValue1?: number;
  
    knobOnChange(val: any)
    {
        this.msg.add({
            severity: "info",
            summary: "New Value: " + val,
            detail: "Knob Value Changed"
        })
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { KnobModule } from 'primeng/knob';
import { ToastModule } from 'primeng/toast';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        KnobModule,
        ToastModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

Angular PrimeNG表单旋钮事件组件

例子2：在这个例子中，每当旋钮的值发生变化时，我们就检查它是否小于75。如果是，我们就显示一个反馈输入，否则我们就显示一个标有提交的按钮。

app.component.html

<h2 style="color: green">
    GeeksforGeeks
</h2>
<h3>
    Angular PrimeNG Form
    Knob Events Component
</h3>
  
<h2>Give Rating from 0 to 100</h2>
<p-knob 
    [step]="5"
    (onChange)="knobOnChange($event)"
    [(ngModel)]="knobValue1">
</p-knob>
  
<input 
    pInputText 
    type="text" 
    placeholder="Please give feedback" 
    [hidden]="isFeedbackHidden"
/>
<br>
<button 
    pButton 
    label="Submit" 
    style="margin-top: 10px;">
</button>

app.component.ts

import { Component } from '@angular/core';
  
@Component({
    selector: 'app-root',
    templateUrl: './app.component.html',
    styleUrls: ['./app.component.css'],
})
  
export class AppComponent {
    knobValue1: number = 85;
    isFeedbackHidden = true;
  
    knobOnChange(val: any)
    {
        val >= 75 
        ? this.isFeedbackHidden = true
        : this.isFeedbackHidden = false;
    }
}

app.module.ts

import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { BrowserAnimationsModule }
    from '@angular/platform-browser/animations';
import { AppComponent } from './app.component';
import { FormsModule } from '@angular/forms';
import { KnobModule } from 'primeng/knob';
import { ButtonModule } from 'primeng/button';
import { InputTextModule } from 'primeng/inputtext';
  
@NgModule({
    imports: [
        BrowserModule,
        BrowserAnimationsModule,
        FormsModule,
        KnobModule,
        ButtonModule,
        InputTextModule
    ],
    declarations: [AppComponent],
    bootstrap: [AppComponent],
})
export class AppModule { }

输出:

Angular PrimeNG表单旋钮事件组件