Question

我正在尝试做简单的事情，以反应形式动态地将值设置为p-multiSelect。将ngModel与p-multiSelect属性一起使用会很好，但是如果我将反应式与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>

Answer 1

仅传递所选值的数组而不是单个值

单个值

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

多个值

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

，并在文档页面中提及 MultiSelect使用以下命令检测对选项和选定值的更改设置者，因此在更改模型时，更喜欢创建一个新数组引用而不是操纵现有数组。

demo ??

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

1 个答案: