如果值是预先选择的(primeng multiselet),如何禁用其他字段?

时间:2019-07-19 05:42:47

标签: angular primeng

我正在使用从primng进行的多选,并将选择限制设置为1。我在onInit中设置了值。发生的情况是,该值被选中但未禁用其他值。

以下是ts文件

    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];
        }

    }

并且html文件是

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

如果预先选择该值,如何禁用其他字段??

这是stackblitz

3 个答案:

答案 0 :(得分:0)

这是一个旧的already reported issue, 开发人员尚未回应。我创建了一个PR to fix this issue, 直到PR合并或primeng团队提出解决方案,您才能解决它 使用ViewChild修复程序。

ViewChild修复程序:

primeng MultiSelect具有一个名为maxSelectionLimitReached的属性,该属性设置为 达到最大限制时为true。您必须自己在ngOnInit中进行设置。跟随 注释作为步骤。

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

将viewChild标识符添加到<p-multiSelect>元素。

<p-multiSelect #dataSelect [options]="cities1" ... ></p-multiSelect>

答案 1 :(得分:0)

Munim Munna的答案比我的simple简单得多,但在我们的项目中,我们通过将选项the的disable设置为true来管理选择Limit(限制)。

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

模板

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

demo ??

答案 2 :(得分:0)

PrimeNG multiselect 具有属性 maxSelectionLimitReached 取决于 selectionLimit ,默认情况下为 false 。因此,不幸的是,当您通过 ngOnInit 传递数据时,它不会进行计算。您可以通过传递 true

轻松完成此操作
ngOnInit() { 
    this.data = [4];
    this.dataSelect.maxSelectionLimitReached = true; // Just set true :)
}