Angular PrimeNG Form MultiSelect Events组件

Angular PrimeNG是一个免费的开源框架，拥有各种组件，Angular开发者可以在他们的应用程序中使用这些组件来增强用户体验，并加快开发速度，因为他们不必从头开始编写一切。在这篇文章中，我们将讨论Angular PrimeNG表单多选事件组件。

表格多选组件允许用户从提供的选项集中选择多个选项。表单多选组件的事件用于在用户以某种特定方式与该组件进行交互时调用一个函数。表单多选组件总共有8个事件。

Angular PrimeNG Form MultiSelect Events：

onClick。该事件接受一个回调函数，当用户点击多选组件时，该函数被调用。
onChange。这个事件以一个回调函数作为其值。当组件的值发生变化时，该回调被触发。
onFilter。当Multiselect数据被过滤时，传递给该事件的回调函数被触发。
onFocus。当多选组件成为焦点时，该事件的回调函数被调用。
onBlur：当多选组件失去焦点时，该事件的回调函数被调用。
onPanelShow。当多选叠加面板变得可见时，传递给该事件的回调函数被触发。
onPanelHide。当多选覆载面板被隐藏时，传递给该事件的回调函数被触发。
onClear：当多选输入使用清除图标被清除时，传递给该事件的回调被调用。
onLazyLoad：当启用懒惰加载时，当新数据被加载时，传递给该事件的回调被调用。

Angular PrimeNG Form MultiSelect Events Properties：

option。我们可以向这个属性传递一个对象数组来显示多选选项。
defaultLabel。它是在没有选择项目时显示的标签。
optionLabel。它是多选组件的一个选项的标签字段的名称。

语法:

<p-multiSelect 
    [options]="..." 
    [(ngModel)]="..."
    defaultLabel="..." 
    (event-name)="callbackFunc()"
    optionLabel="...">
</p-multiSelect>

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

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

ng new my_app

第2步：创建应用程序后，使用下面写的命令移动到项目文件夹。

cd new_app

第3步：最后，在你的项目目录中安装以下模块。

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

项目结构：现在，项目结构将如下图所示。

Angular PrimeNG Form MultiSelect Events组件

Project Structure

例子1：下面的例子展示了如何使用多选组件的onClick, onChange, onPanelShow和onPanelHide事件来触发自定义函数。

app.component.html:

<h2>GeeksforGeeks</h2>
<h5>
    Angular PrimeNG Form 
    MultiSelect Events Component
</h5>
  
<p-multiSelect 
    [options]="courses" 
    [(ngModel)]="selected" 
    defaultLabel="Select Course(s)" 
    (onClick)="handleOnClick()"
    (onChange)="handleOnChange()"
    (onPanelShow)="handleOnPanelShow()"
    (onPanelHide)="handleOnPanelHide()"
    optionLabel="name">
</p-multiSelect>
  
<p-toast position="top-right"></p-toast>

app.component.ts:

import { Component } from "@angular/core";
import { MessageService } from "primeng/api";
  
interface Course {
    id: number;
    name: string;
    price: string;
}
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    providers: [MessageService]
})
export class AppComponent {
    constructor(private ms: MessageService) { }
  
    courses: Course[] = [];
    selected: Course[] = [];
  
    ngOnInit() {
        this.courses = [
            {
                id: 1,
                name: "Self Paced DSA",
                price: "3,899"
            },
            {
                id: 2,
                name: "CIP - Self Paced",
                price: "6,999"
            },
            {
                id: 3,
                name: "System Design - Live",
                price: "10,999"
            },
            {
                id: 4,
                name: "CP - Live",
                price: "10,999"
            },
            {
                id: 5,
                name: "C++ Self Paced",
                price: "1,699"
            },
            {
                id: 6,
                name: "GATE 2024",
                price: "11,999"
            }
        ];
    }
  
  
    handleOnClick() {
        this.ms.add({
            severity: "success",
            summary: "Component Clicked",
            detail: "GeeksforGeeks"
        })
    }
  
    handleOnChange() {
        this.ms.add({
            severity: "success",
            summary: "Component Value Changed",
            detail: "GeeksforGeeks"
        })
    }
  
    handleOnPanelShow() {
        this.ms.add({
            severity: "success",
            summary: "Panel Visible",
            detail: "GeeksforGeeks"
        })
    }
  
    handleOnPanelHide() {
        this.ms.add({
            severity: "success",
            summary: "Pannel Hidden",
            detail: "GeeksforGeeks"
        })
    }
}

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

输出:

Angular PrimeNG Form MultiSelect Events组件

实例2：在这个例子中，我们使用了多选组件的onFocus, onBlur,和onClear事件，并在事件发生时显示敬酒信息。

app.component.html:

<h2>GeeksforGeeks</h2>
<h5>
    Angular PrimeNG Form 
    MultiSelect Events Component
</h5>
  
<p-multiSelect 
    [options]="courses" 
    [(ngModel)]="selected"
    [showClear]="true"
    [filter]="false" 
    defaultLabel="Select Course(s)" 
    (onClear)="handleOnClear()"
    (onFocus)="handleOnFocus()"
    (onBlur)="handleOnBlur()"
    optionLabel="name">
</p-multiSelect>
  
<p-toast position="top-right"></p-toast>

app.component.ts:

import { Component } from "@angular/core";
import { MessageService } from "primeng/api";
  
interface Course {
    id: number;
    name: string;
    price: string;
}
  
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    providers: [MessageService]
})
export class AppComponent {
    constructor(private ms: MessageService) { }
  
    courses: Course[] = [];
    selected: Course[] = [];
  
    ngOnInit() {
        this.courses = [
            {
                id: 1,
                name: "Self Paced DSA",
                price: "3,899"
            },
            {
                id: 2,
                name: "CIP - Self Paced",
                price: "6,999"
            },
            {
                id: 3,
                name: "System Design - Live",
                price: "10,999"
            },
            {
                id: 4,
                name: "CP - Live",
                price: "10,999"
            },
            {
                id: 5,
                name: "C++ Self Paced",
                price: "1,699"
            },
            {
                id: 6,
                name: "GATE 2024",
                price: "11,999"
            }
        ];
    }
  
  
    handleOnFocus() {
        this.ms.add({
            severity: "success",
            summary: "MultiSelect In Focus",
            detail: "GeeksforGeeks"
        })
    }
  
    handleOnBlur() {
        this.ms.add({
            severity: "success",
            summary: "MultiSelect out of Focus",
            detail: "GeeksforGeeks"
        })
    }
  
    handleOnClear() {
        this.ms.add({
            severity: "success",
            summary: "MultiSelect Cleared",
            detail: "GeeksforGeeks"
        })
    }
}

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

输出:

Angular PrimeNG Form MultiSelect Events组件