时间戳

首页 > 解决方案 > PrimeNG - PrimeFaces

angular - PrimeNG - PrimeFaces

问题描述

我正在使用带有 PrimeNG 的 Angular 表单，并且我正在尝试使用初始值初始化下拉列表，但对我不起作用。我也尝试使用 setValue 方法但不起作用。

这是html代码

<form [formGroup]="filtersForm">
    <div class="ui-g-3">
       <div class="form-control">
         <p-dropdown formControlName="dimensionRule" class="dropdown" [options]="monedasMock" optionLabel="label"></p-dropdown>
       </div>
    </div>
</form>

这是用 TypeScript 编写的 JavaScript 代码

public ngOnInit() : void {

    this.monedasMock = [
        { 'label': 'Euro', 'value': '1' },
        { 'label': 'Peseta', 'value': '2' },
        { 'label': 'Florin', 'value': '3' },
        { 'label': 'Marco', 'value': '4' }
    ];

    this.filtersForm = this.fBuilder.group({
        "descriptionRule": new FormControl(),
        "dimensionRule": new FormControl('Florin'), // This is the value that I want to initialize
        "processRule": new FormControl()
    });
}

标签： angularforms

解决方案

如果您使用的是SelectItem {value:any, label:string}。

要在下拉元素中预选一个选项，您必须传递“值”属性。

在这种情况下：

...
"dimensionRule": new FormControl('3'),
...

SelectItem 集合不需要“optionLabel”。

推荐阅读