PrimeNG p-具有动态反应式设置值的多重选择 [英] primeNG p-multiSelect with reactive form setting value dynamically
本文介绍了PrimeNG p-具有动态反应式设置值的多重选择的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!
问题描述
我正在尝试做一件简单的事情,用反应形式动态地将一个值设置为p-MultiSelect。 使用带有p-MultiSelect属性的ngModel效果很好,但如果我使用带有p-MultiSelect属性的反应式表单,则无法设置p-MultiSelect From Component。
根据角度文件: "支持将ngModel输入属性和ngModelChange事件与反应形式指令一起使用,在ANGLE V6中已弃用,将被删除" https://angular.io/api/forms/FormControlName#use-with-ngmodel
有Stackblitz重现的链接:
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>
推荐答案
只传递所选值的数组,而不是单个值
单值
this.groupForm.get('selectedCities').setValue([4]);
多个值
this.groupForm.get('selectedCities').setValue([4,5]);
以及在文档页面中提及这一点 多选检测对选项和选定值的更改 设置程序因此在更改模型时,更喜欢创建新的数组 引用而不是操作现有数组。
这篇关于PrimeNG p-具有动态反应式设置值的多重选择的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!
查看全文