How to disable the other field if the value is pre-selected (primeng multiselet)?
Update: This issue is fixed in primeng version 8.0.2
This is an old already reported issue on which primeng
developers has not responded yet. I have created a PR to fix this issue,
until the PR is merged or the primeng team comes up with a fix, you can solve it
using a ViewChild
fix.
The ViewChild
fix:
primeng MultiSelect
has a property named maxSelectionLimitReached
which is set to
true when max limit is reached. You have to set it yourself in your ngOnInit
. Follow
the comments as steps.
import { Component, ViewChild } from '@angular/core'; // import ViewChild
import { MultiSelect } from 'primeng/multiselect'; // import MultiSelect
@Component({
selector: 'app-root',
templateUrl: './app.component.html'
})
export class AppComponent {
@ViewChild('dataSelect', { static: true }) dataSelect: MultiSelect; // declare ViewChild
data = [];
cities1 = [
{ label: 'New York', value: 1 },
{ label: 'Rome', value: 2 },
{ label: 'London', value: 3 },
{ label: 'Istanbul', value: 4 },
{ label: 'Paris', value: 5 }
];
ngOnInit() {
this.data = [4];
this.dataSelect.maxSelectionLimitReached = this.data.length >= 1; // Set limit flag
}
}
Add viewChild identifier to <p-multiSelect>
element.
<p-multiSelect #dataSelect [options]="cities1" ... ></p-multiSelect>