How to disable the other field if the value is pre-selected (primeng multiselet)?

Question

I am using multi-select from the primeng and set the selection Limit as 1. I am setting the value in onInit. What it is happening like, the value getting selected but not disabling for other values.

Following is the ts file

    export class AppComponent {

        cities1 = [
            {label:'New York', value:1},
            {label:'Rome', value:2},
            {label:'London', value:3},
            {label:'Istanbul', value:4},
            {label:'Paris', value:5}
        ];

        data = [];
        ngOnInit(){
            this.data = [4];
        }

    }

and the html file is

<p-multiSelect [options]="cities1" [(ngModel)]='data' 
      [selectionLimit]="1" ></p-multiSelect>

How to disable the other field if the value is pre-selected.?

Here is the stackblitz

Answer 1

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>

Answer 2

Munim Munna answer is a pretty simpler than mine 😅 but In our project we manage the selection Limit by set the disable to true for the options 👇

 selectionLimit: number = 2;
 ngOnInit() {
    this.data = [4,5];
    this.updateOptionState(this.data)
  }

  updateOptionState(SelectedValue) {
    if (SelectedValue.length == this.selectionLimit) { // ⚡ check the limit 
      this.cities1
        .filter(item => SelectedValue.indexOf(item.value) === -1) // set other option 
        .forEach(i => {
          i.disabled = true
        })
    } else {
      this.cities1.forEach(item => item.disabled = false) // 🌟 reset
    }
  }

template

<p-multiSelect #dataSelect [options]="cities1" [(ngModel)]='data' 
               (ngModelChange)="updateOptionState(data)"></p-multiSelect>

demo 🔥🔥