反应形式的Angular PrimeNG下拉组件-初始值 [英] Angular PrimeNG dropdown component in reactive forms - initial value

问题描述

使用primeNg下拉组件，我尝试使用初始值初始化该下拉列表，但没有成功，我使用的是反应式方法.

using primeNg dropdown component, I'm trying to initialized the dropdown with initial value with no success, I'm using reactive approach.

我检查了primeNg文档和演示-几乎所有示例都是使用模板驱动的，我希望模型驱动的示例也是如此.

I checked the primeNg documentation and demos - almost all the examples there are using template driven, I would like to have the same with model driven.

我可以使用列表中的值呈现下拉列表，但是所选项目不是我在表单中声明的​​项目，而是列表中的第一项.

I'm able to render the dropdown with the values in the list but the selected item is not the one I declared in the form, instead it's the first item in the list.

我的代码: 模板

    <div [formGroup]="formGroup">
      <p-dropdown [options]="results"
                 formControlName="second"
                (onChange)="onChangeHandler($event)"
                optionLabel="label">
       </p-dropdown>
    </div>

组件

  this.second = new FormControl('second');
  this.formGroup= this.builder.group({
            second: this.second
        });


    this.results = [];
    this.results.push({ label: 'First Data', value: "first" });
    this.results.push({ label: 'Second Test Data', value: "second" });
    this.results.push({ label: 'Third Data', value: "third" });

请告知.

如果任何人都可以在模型驱动下共享primeNG下拉组件的工作示例，那就太好了. 值应具有键值属性，例如在我的示例中.

If anyone can share a working example of primeNG dropdown component in model driven it would be great. The values should have key, value attributes like in my example.

推荐答案

由于名为second的FormControl是您的FormGroup的一部分，因此实例化应在FormGroup本身内部.考虑以下示例，

Since the FormControl named second is a part of the your FormGroup, the instantiation should be inside the FormGroup itself. Consider the following example,

this.formGroup= this.builder.group({
    second: new FormControl('second')
});

这篇关于反应形式的Angular PrimeNG下拉组件-初始值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！