CODEWITHSUNDEEP
angularprimeng
mkHun
mkHun

Reputation: 5927

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

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

Upvotes: 8

Views: 3220

Answers (3)

Feroz Ahmed
Feroz Ahmed

Reputation: 72

PrimeNG multiselect has a property maxSelectionLimitReached depends on selectionLimit and by default it is false. So, when you pass data through ngOnInit unfortunately it doesn't calculate it. You can do it easily by passing true

ngOnInit() { 
    this.data = [4];
    this.dataSelect.maxSelectionLimitReached = true; // Just set true :)
}

Upvotes: 0

Munim Munna
Munim Munna

Reputation: 17546

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>

Upvotes: 5

Muhammed Albarmavi
Muhammed Albarmavi

Reputation: 24424

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 🔥🔥

Upvotes: 2

Related Questions