反应形式的 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

由于FormControl命名second是 your 的一部分FormGroup，因此实例化应该在其FormGroup自身内部。考虑下面的例子，

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