Компонент привязки значения MultiSelect формы Angular PrimeNG

Опубликовано: 24 Февраля, 2023

PrimeNG — это библиотека компонентов AngularJS, разработанная PrimeFaces. Он предоставляет разработчикам возможность выбора из широкого спектра уже реализованных тем и компонентов пользовательского интерфейса для своих приложений. В этой статье мы обсудим компонент привязки значений Angular PrimeNG Form MultiSelect.

Компонент MultiSelect позволяет пользователю выбирать несколько параметров из набора предоставленных параметров. Значение параметра в MultiSelect ограничено самой моделью, но мы можем использовать свойство optionValue в Multiselect, чтобы передать пользовательское значение для параметров.

Свойства режима привязки значения MultiSelect формы Angular PrimeNG:

options: это свойство принимает массив объектов для отображения в качестве параметров множественного выбора.
optionLabel: это свойство указывает свойство объекта параметров для отображения меток параметров.
optionValue: это свойство указывает свойство объекта параметров для получения значения параметров.
defaultLabel: это свойство используется для указания строки-заполнителя для компонента MultiSelect.
optionGroupLabel: это свойство указывает свойство объекта параметров для получения метки групп, когда множественный выбор находится в групповом режиме.
optionGroupChildren: это свойство указывает свойство объекта параметров для получения дочерних элементов групп, когда множественный выбор находится в групповом режиме.

Синтаксис:

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

Создание приложения и установка необходимых модулей:

Шаг 1: Создайте приложение Angular с помощью следующей команды.

ng new my_app

Шаг 2: После создания приложения перейдите в папку проекта с помощью приведенной ниже команды.

cd new_app

Шаг 3: Наконец, установите следующие модули в каталог вашего проекта.

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

Структура проекта: Структура проекта показана на рисунке ниже.

Пример 1. Это простой пример, иллюстрирующий привязку значения в Multiselect с использованием свойства optionValue . Здесь мы устанавливаем для параметра optionValue значение «id», поэтому в качестве значения будет использоваться свойство id параметра. Мы устанавливаем идентификаторы параметров «Puma» и «HRX» в одну строку, поэтому всякий раз, когда один из них выбирается/отменяется, другой тоже выбирается. Это просто для того, чтобы показать, что значение привязано правильно.

app.component.html

HTML

<h2 style="color: green;">
    GeeksforGeeks
</h2>
<h5>
    Angular PrimeNG Form MultiSelect
    Value Binding Component
</h5>
 
<p-multiSelect
    class="custom-ms"
    [options]="brands"
    [(ngModel)]="selectedBrands"
    optionLabel="name"
    optionValue="id"
    defaultLabel="Select Brand(s)">
</p-multiSelect>

app.component.ts

Javascript

import { Component } from "@angular/core";
 
interface Brand {
    name: string;
    id: string;
}
 
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styles: [
        `
        :host ::ng-deep .custom-ms
            .p-multiselect-label {
            width: 300px !important;
        }
        `
    ]
})
 
export class AppComponent {
 
    brands: Brand[] = [];
    selectedBrands: Brand[] = [];
 
    ngOnInit() {
        this.brands = [
 
            {
                name: "Adidas",
                id: "sports_1"
            },
            {
                name: "Puma",
                id: "sports_2"
            },
            {
                name: "Nike",
                id: "sports_3"
            },
            {
                name: "HRX",
                id: "sports_2"
            },
 
            {
                name: "Delhivery",
                id: "trans_1"
            },
            {
                name: "DHL",
                id: "trans_2"
            },
            {
                name: "FedEx",
                id: "trans_3"
            }
        ];
    }
}

app.module.ts

Javascript

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

Выход:

Пример 2. В этом примере мы использовали группировку параметров и установили для свойства optionValue значение «id», поэтому значение параметров будет взято из свойства id. Здесь мы устанавливаем идентификатор «Adidas» и «Puma» в одну строку, поэтому всякий раз, когда выбирается один, флажок другого также включается, и наоборот.

app.component.html

HTML

<h2 style="color: green;">
    GeeksforGeeks
</h2>
<h5>
    Angular PrimeNG Form MultiSelect
    Value Binding Component
</h5>
 
<p-multiSelect
    class="custom-ms"
    [group]="true"
    [options]="brandGroups"
    [(ngModel)]="selectedBrands"
    optionLabel="name"
    optionValue="id"
    optionGroupLabel="groupName"
    optionGroupChildren="brands"
    defaultLabel="Select Brand(s)">
</p-multiSelect>

app.component.ts

Javascript

import { Component } from "@angular/core";
 
interface Brand {
    name: string;
    id: string;
}
 
interface BrandsGroup {
    groupName: string;
    brands: Brand[];
}
@Component({
    selector: "app-root",
    templateUrl: "./app.component.html",
    styles: [
        `
        :host ::ng-deep .custom-ms
            .p-multiselect-label {
            width: 300px !important;
        }
        `
    ]
})
 
export class AppComponent {
 
    brandGroups: BrandsGroup[] = [];
    selectedBrands: Brand[] = [];
 
    ngOnInit() {
        this.brandGroups = [
            {
                groupName: "Sports",
                brands: [
                    {
                        name: "Adidas",
                        id: "sports_1"
                    },
                    {
                        name: "Puma",
                        id: "sports_1"
                    },
                    {
                        name: "Nike",
                        id: "sports_3"
                    },
                    {
                        name: "HRX",
                        id: "sports_4"
                    },
                ]
            },
            {
                groupName: "Transport",
                brands: [
                    {
                        name: "Delhivery",
                        id: "trans_1"
                    },
                    {
                        name: "DHL",
                        id: "trans_2"
                    },
                    {
                        name: "FedEx",
                        id: "trans_3"
                    }
                ]
            },
            {
                groupName: "Clothing",
                brands: [
                    {
                        name: "Peter England",
                        id: "clothing_1"
                    },
                    {
                        name: "Allen Solly",
                        id: "clothing_2"
                    }
                ]
            }
        ];
    }
}

app.module.ts

Javascript

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

Выход:

Ссылка: https://www.primefaces.org/primeng/multiselect

Technical Scripter Picked AngularJS

Компонент привязки значения MultiSelect формы Angular PrimeNG

HTML

Javascript

Javascript

HTML

Javascript

Javascript

РЕКОМЕНДУЕМЫЕ СТАТЬИ