primeNG p-multiSelect 具有动态反应形式设置值

Posted 2023-03-13

【中文标题】primeNG p-multiSelect 具有动态反应形式设置值

【英文标题】：primeNG p-multiSelect with reactive form setting value dynamically

【发布时间】：2019-12-11 11:03:38

【问题描述】：

我正在尝试做简单的事情，使用反应形式为 p-multiSelect 动态设置一个值。 使用带有 p-multiSelect 属性的 ngModel 效果很好，但是如果我使用带有 p-multiSelect 属性的反应形式，我无法从组件设置 p-multiSelect。

根据角度文档： “在 Angular v6 中已不推荐使用带有反应形式指令的 ngModel 输入属性和 ngModelChange 事件，并将被删除” https://angular.io/api/forms/FormControlName#use-with-ngmodel

stackblitz repro 有一个链接：

https://stackblitz.com/edit/multyselectandform?file=src/app/app.component.ts

组件：

  groupForm: FormGroup;
  cities: SelectItem[] = [
     label: 'New York', value: 1 ,
     label: 'Rome', value: 2 ,
     label: 'London', value: 3 ,
     label: 'Istanbul', value: 4 ,
     label: 'Paris', value: 5 
  ];
  setected =  label: 'Istanbul', value: 4 ;

  constructor(private fb: FormBuilder) 
    this.groupForm = this.fb.group(
      selectedCities: ["", Validators.nullValidator],
    );
    //************doesn't work*************
    this.groupForm.get('selectedCities').setValue(this.setected);
    // this.groupForm.get('selectedCities').setValue(4);
  

模板：

 <div class="form-group">
       <label for="cities" class="control-label">Cities</label>
        <p-multiSelect [options]="cities" formControlName="selectedCities"></p-multiSelect>
 </div>

【参考方案1】：

只传递一个选定值的数组，而不是单个值

单值

this.groupForm.get('selectedCities').setValue([4]);

多值

this.groupForm.get('selectedCities').setValue([4,5]);  

并在文档页面中提到这一点 MultiSelect 使用以下方法检测选项和选定值的更改 设置器，因此在更改模型时，更喜欢创建一个新数组 引用而不是操作现有数组。

demo ??

【讨论】：

我们可以使用name和url属性而不是label和value吗？