反应形式的 Angular PrimeNG 下拉组件 - 初始值

Question

使用 primeNg 下拉组件，我正在尝试使用初始值初始化下拉列表但没有成功，我正在使用响应式方法。

我查看了 primeNg 文档和演示 - 几乎所有示例都使用模板驱动，我希望与模型驱动相同。

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

我的代码： 模板

    <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 下拉组件的工作示例，那就太好了。 这些值应该像我的示例一样具有键、值属性。

Answer 1

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

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